javascript - 输入未与 Vue.js 正确绑定(bind)

Question

我对 Vue.js 还比较陌生，并且在将我的输入之一绑定(bind)到 View 模型时遇到问题。

这是我的 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，绑定(bind)到 component.Name 的输入也不会使用组件名称进行更新。当我进入控制台 viewModel.component.Name 时，我可以看到它返回 ""。

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

你知道我哪里出错了吗？

Answer 1

您不能使用该行this.component=response.component;因为 this 变量。

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