輸入未與Vue.js正確綁定

Question

我對Vue.js還是一個Vue.js ，在將我的輸入之一綁定到我的視圖Vue.js時遇到了問題。

這是我的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.");
                    }
                });
            }
        }
    }
});

這是我的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>

現在的問題是，即使我輸入有效的UPC代碼並將組件分配給ViewModel，綁定到component.Name的輸入也不會使用組件名稱進行更新。 當我進入控制台viewModel.component.Name我看到它返回"" 。

但是，如果我在分配了組件之后在ajax.done函數中放置了一個警報，並且它看起來像這個alert(this.component.Name)則它會警報組件的名稱。

關於我在哪里出問題的任何想法？

Answer 1

您不能使用該行this.component = response.component; 因為this變量。

您應該在ajax調用之前放置var self = this行，並使用self.component而不是this.component

Answer 2

為了使vue正常工作，您需要定義ID為InventoryContainer的父容器

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

這是更新的代碼： https : //jsfiddle.net/hdqdmscv/這是根據您的評論更新的小提琴

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

（用ajax中的vue變量的名稱替換它）