Javascript 输入未与Vue.js正确绑定

我对

Vue.js

还比较陌生，在将我的一个输入绑定到我的viewmodel时遇到了一个问题

以下是我的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）

它会提醒组件的名称

---

你知道我哪里出了问题吗？

为了让vue正常工作，你需要用id InventoryContainer定义父容器

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

....

以下是更新的代码： 这是根据你的评论更新的小提琴

（用ajax中的vue变量名称替换该行）

您不能使用该行

this.component=response.component
因为
这个
-变量

你应该放线
var self=此
在ajax调用并使用
self.component
之前，不要使用似乎已经完成的
this.component
，否则这将不起作用，“但是如果在分配组件后，我在我的ajax.done函数中添加了一个警报，它看起来像是这个警报（this.component.Name），它会提醒组件的名称。”@雷纳：我已经更新了我的小提琴，让我看看它是否有效。是的，这正是问题所在。我本该抓到的，但没抓到。谢谢你的帮助！