输入未与 Vue.js 正确绑定

Question

我对 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 我可以看到它 returns "".

但是，如果我在分配组件后在我的 ajax.done 函数中放置一个警告，它看起来像这样 alert(this.component.Name) 它会警告组件的名称。

知道我哪里出错了吗？

Answer 1

为了让 vue 工作，您需要使用 id InventoryContainer 定义父容器

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

这是更新后的代码：https://jsfiddle.net/hdqdmscv/ 这是根据您的评论

更新后的 fiddle

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

（将其替换为 ajax 中的 vue 变量名称）

Answer 2

你不能使用那条线 this.component = response.component; 因为 this-变量。

你应该把线 var self = this 在 ajax 调用之前使用 self.component 而不是 this.component

输入未与 Vue.js 正确绑定

Input not binding correctly with Vue.js

javascript

mvvm

vue.js