绑定值不会随着更改而更新

时间：2019-01-07 20:08:19

标签： vue.js vuejs2 computed-properties

我已经能够为不同的输入创建值，但是如果我在页面上进行了更改，则它会正确显示在表单中，但是当我使用开发人员工具并检查更改是否在那里更新时，它不会更新。我尝试了多种方法进行v-bind：value或v-model，但是它没有反应。我希望它能够做出反应，这样我就不必去每个输入并获取更新后的值，我可以调用使用更新后的值创建的数组。不确定我缺少什么。

http://jsfiddle.net/fjLvhutp/ 

 <ul>
      <li v-for="item in finditem()" v-if="item.html == 0">
          <label v-bind:for="item.item">{{ item.item }}</label>
          <div v-bind:id="item.item">{{ item.result }}</div>
      </li>
      <li v-else-if="item.html == 1">
          <label v-bind:for="item.item">{{ item.item }}</label>
          <input type="text"v-model="item.result" />$
      </li>
      <li v-else-if="item.html == 2">
          <label v-bind:for="item.item">{{ item.item }}</label>
          <input type="checkbox" v-bind:id="item.item" v-bind:id="item.item" v-bind:value="item.result" />
      </li>
      <li v-else-if="item.html == 3">
          <label v-bind:for="item.item">{{ item.item }}</label>
          <select v-bind:id="item.item">
               <option v-for="drop in item.dropdown">{{ drop.Value }}</option>
          </select>
      </li>
 </ul>

 var vm = new Vue({
    el: '#components-demo',
    data: {
        todos: [
            newData
        ]
    },
    methods: {
        finditem() {
            var setarray = [];
            var result = Object.keys(newData).map(function (key) {
                return [key, newData[key]];
            });
            var travelModeId = '';
            $(result).each(function (i, value) {
                var getValue = value[0];

                // No Input
                if (getValue == "Reservation" || getValue == "LastUpdatedBy" || getValue == "LastUpdated") {
                    var first = value[0];
                    var second = value[1];
                    var htmlId = 0;
                    setarray.push({ item: first, result: second, html: htmlId });
                }
                // Text Input
                if (getValue == "Fare" || getValue == "AgentFee" || getValue == "ChangeFee" || getValue == "NteAmount" || getValue == "GsaRate" || getValue == "ClientApprovedAmount" || getValue == "CancelledDate") {
                    var first = value[0];
                    var second = value[1];
                    var htmlId = 1;
                    setarray.push({ item: first, result: second, html: htmlId });
                }
                // Checkbox
                if (getValue == "Ground" || getValue == "NoGsa") {
                    var first = value[0];
                    var second = value[1];
                    var htmlId = 2;
                    setarray.push({ item: first, result: second, html: htmlId });
                }
                // Select
                if (getValue == "TravelModeId") {
                    travelModeId = value[1];
                }
                // Select Dropdown
                if (getValue == "TravelModeDropdown") {
                    var first = "Travel Mode";
                    var second = value[1];
                    var htmlId = 3;
                    setarray.push({ item: first, result: travelModeId, html: htmlId, dropdown: second });
                }
            });
            return setarray;
        }
    }

3 个答案:

答案 0 :(得分：1)

数据应该是一个返回对象的函数，而不仅仅是返回像这样的对象：

data: function() {
    return {
      todos: [
          newData
      ]
    }
}

另外finditem()应该是computed property，例如：

computed: {
    finditem: function() {
        var setarray = [];
        var result = Object.keys(newData).map(function (key) {
            return [key, newData[key]];
        });
        var travelModeId = '';
        $(result).each(function (i, value) {
            var getValue = value[0];

            // No Input
            if (getValue == "Reservation" || getValue == "LastUpdatedBy" || getValue == "LastUpdated") {
                var first = value[0];
                var second = value[1];
                var htmlId = 0;
                setarray.push({ item: first, result: second, html: htmlId });
            }
            // Text Input
            if (getValue == "Fare" || getValue == "AgentFee" || getValue == "ChangeFee" || getValue == "NteAmount" || getValue == "GsaRate" || getValue == "ClientApprovedAmount" || getValue == "CancelledDate") {
                var first = value[0];
                var second = value[1];
                var htmlId = 1;
                setarray.push({ item: first, result: second, html: htmlId });
            }
            // Checkbox
            if (getValue == "Ground" || getValue == "NoGsa") {
                var first = value[0];
                var second = value[1];
                var htmlId = 2;
                setarray.push({ item: first, result: second, html: htmlId });
            }
            // Select
            if (getValue == "TravelModeId") {
                travelModeId = value[1];
            }
            // Select Dropdown
            if (getValue == "TravelModeDropdown") {
                var first = "Travel Mode";
                var second = value[1];
                var htmlId = 3;
                setarray.push({ item: first, result: travelModeId, html: htmlId, dropdown: second });
            }
        });
        return setarray;
    }
}

然后您将计算属性称为：

 <li v-for="item in finditem" v-if="item.html == 0">

如果更改了变量/相关性（在方法内部使用），则方法不会自动再次调用。
如果更改了变量/相关性，则会再次调用计算的属性，因此v-for自动获取正确的数据。
因此，请尝试这些更改，然后看看它是否更新了数据。

答案 1 :(得分：1)

我在这里看到一些问题：

  1. item不在v-for内，而li元素是循环中第一个元素的兄弟。将所有li元素合并在一起，并在输入上使用v-if和v-if-else条件。

  2. data是对象而不是函数。

  3. key上没有li属性。

模板 

<ul>
  <li v-for="(item, index) in finditem()" :key="index">
    <label :for="item.item">{{ item.item }}</label>
    <div v-if="item.html === 0" :id="item.item">{{ item.result }}</div>
    <input v-else-if="item.html == 1" :id="item.item" type="text" v-model="item.result" />$
    <input v-else-if="item.html == 2" type="checkbox" :id="item.item" v-model="item.result" />
    <select v-else-if="item.html == 3" :id="item.item" v-model="item.result">
       <option v-for="drop in item.dropdown" :value="drop.Value" :key="drop.Value">{{ drop.Value }}</option>
    </select>
  </li>
</ul>

脚本 

data: () => ({
  todos: []
})

更新

我已经更新了您的fiddle。现在，输入将基于模板中的条件语句进行渲染，并删除了jQuery依赖项。

答案 2 :(得分：1)

有两件事可能导致此问题：

  1. 将data创建为函数是一种很好的做法。
  2. 在newdata方法中对变量finditem()的引用应该是this.todos[0]，或者不应该将this.todos用作空数组吗？这是因为newData是变量，字符串，数字还是其他？

您的代码应类似于（认为newData是todos数组中的字符串）：

new Vue({
    el: '#components-demo',
    data: function () {
        return {
            todos: ['newData']
        }
    },
    methods: {
        finditem() {
            var setarray = [];
            var result = Object.keys(this.todos).map(function (key) {
                return [key, this.todos[key]];
            });
            var travelModeId = '';
            $(result).each(function (i, value) {
                var getValue = value[0];

                // No Input
                if (getValue == "Reservation" || getValue == "LastUpdatedBy" || getValue == "LastUpdated") {
                    var first = value[0];
                    var second = value[1];
                    var htmlId = 0;
                    setarray.push({ item: first, result: second, html: htmlId });
                }
                // Text Input
                if (getValue == "Fare" || getValue == "AgentFee" || getValue == "ChangeFee" || getValue == "NteAmount" || getValue == "GsaRate" || getValue == "ClientApprovedAmount" || getValue == "CancelledDate") {
                    var first = value[0];
                    var second = value[1];
                    var htmlId = 1;
                    setarray.push({ item: first, result: second, html: htmlId });
                }
                // Checkbox
                if (getValue == "Ground" || getValue == "NoGsa") {
                    var first = value[0];
                    var second = value[1];
                    var htmlId = 2;
                    setarray.push({ item: first, result: second, html: htmlId });
                }
                // Select
                if (getValue == "TravelModeId") {
                    travelModeId = value[1];
                }
                // Select Dropdown
                if (getValue == "TravelModeDropdown") {
                    var first = "Travel Mode";
                    var second = value[1];
                    var htmlId = 3;
                    setarray.push({ item: first, result: travelModeId, html: htmlId, dropdown: second });
                }
            });
            return setarray;
        }
    }
});
  

不是，我没有测试这段代码...

相关问题
最新问题