Question

我对[{1}}仍然相对较新，并且遇到了将我的一个输入绑定到我的viewmodel的问题。

这是我的JavaScript：

Vue.js

这是我的HTML：

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.");
                    }
                });
            }
        }
    }
});

现在的问题是，即使我输入有效的UPC代码并将组件分配给我的ViewModel，绑定到<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>的输入也不会更新组件名称。当我进入控制台component.Name时，我可以看到它返回viewModel.component.Name。

但是，如果我在分配了该组件后在我的""函数中发出警报，它看起来像ajax.done，则会提醒该组件的名称。

关于我在哪里出错的任何想法？

Answer 1

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

你应该放线 var self = this 在您的ajax致电之前，请使用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变量的名称）

输入与Vue.js

2 个答案: