Input not binding correctly with Vue.js

Question

I'm still relatively new to Vue.js and am having an issue binding one of my inputs to my viewmodel.

Here is my JavaScript:

var viewModel = new Vue({
    el: "#InventoryContainer",
    data: {
        upcCode: "",
        component: {
            Name: ""
        }
    },
    methods: {
        upcEntered: function (e) {
            if (this.upcCode.length > 0){
                $.ajax({
                    url: "/Component/GetByUpc",
                    type: "GET",
                    data: {
                        upc: this.upcCode
                    }
                }).done(function (response) {
                    if (response.exists) {
                        $("#ComponentInformation").toggleClass("hidden");
                        this.component = response.component;
                    } else {
                        alert("No component found.");
                    }
                });
            }
        }
    }
});

Here is my HTML:

<div class="form-horizontal row">
    <div class="col-sm-12">
        <div class="form-group">
            <label class="control-label col-md-4">UPC Code</label>
            <div class="col-md-8">
                <input id="ComponentUPC" class="form-control" placeholder="Scan or enter UPC Code" v-on:blur="upcEntered" v-model="upcCode" />
            </div>
        </div>

        <div id="ComponentInformation" class="hidden">
            <input type="text" class="form-control" readonly v-model="component.Name" />
        </div>
    </div>
</div>

Now the issue is that even when I enter a valid UPC code and I assign the component to my ViewModel, the input that is bound to component.Name does not update with the component name. And when I enter into the console viewModel.component.Name I can see that it returns "".

But if I put an alert in my ajax.done function after I've assigned the component and it looks like this alert(this.component.Name) it alerts the name of the component.

Any ideas of where I'm going wrong here?

Graham · Accepted Answer · 2017-09-22 13:49:41Z

1

You cannot use that line this.component = response.component; because of the this-variable.

You should put the line var self = this before your ajax call and use self.component instead of this.component

edited Sep 22, 2017 at 13:49

Graham

7,86020 gold badges67 silver badges92 bronze badges

answered Jul 6, 2017 at 17:15

reinerBa

1,6601 gold badge17 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dev 404 Over a year ago

Yep, that is exactly what the problem was. I should have caught that but didn't. Thanks for your help!

jsmean · Accepted Answer · 2017-07-06 17:34:15Z

0

in order for vue to work you need to define the parent container with id InventoryContainer

<div id="InventoryContainer" class="form-horizontal row">
    <div class="col-sm-12">
        <div class="form-group">
 ....

here is the updated code: https://jsfiddle.net/hdqdmscv/ here is the updated fiddle based on your comment

https://jsfiddle.net/hdqdmscv/2/

(replace this with name of vue variable in ajax)

edited Jul 6, 2017 at 17:34

answered Jul 6, 2017 at 17:14

jsmean

2393 silver badges11 bronze badges

2 Comments

reinerBa Over a year ago

That seems to be done, other wise this would not work "But if I put an alert in my ajax.done function after I've assigned the component and it looks like this alert(this.component.Name) it alerts the name of the component."

jsmean Over a year ago

@Reiner i have updated my fiddle, let me if it works.

Collectives™ on Stack Overflow

Input not binding correctly with Vue.js

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related