绑定值不会在更改时更新答案

【问题标题】：Binding value doesn't update on change绑定值不会在更改时更新
【发布时间】：2023-03-28 18:00:01
【问题描述】：

我已经能够为不同的输入创建值，但是如果我在页面上进行更改，它会在表单中正确显示，但是当我使用开发人员工具并检查更改是否在那里更新时，它不会更新。我尝试了各种方法来 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;
        }
    }

【问题讨论】：

请提供像this这样的运行代码或小提琴，以便轻松调试
用小提琴更新了

标签： vue.js vuejs2 computed-properties

【解决方案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 会自动获取正确的数据。
所以尝试这些更改，让我们看看它是否会更新数据。

【讨论】：

没有更新值，现在我在开发人员工具中看到了一个计算属性，虽然有一个属性数组
您的更新值现在是否在此计算属性中？
不仅是初始值，当我在表单中添加新值时，它不会转换为开发人员工具，所以我知道它还没有更新

【解决方案2】：

我在这里看到了一些问题：

item 不在v-for 内，而li 元素是循环中第一个元素的兄弟。将所有 li 元素合并在一起，并在输入上使用 v-if 和 v-if-else 条件。
data 是一个对象，而不是一个函数。
li 上没有 key 属性。

模板

<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 依赖项。

【讨论】：

hmm 这样做不会在开发者工具中返回任何值，只是一个空数组
newData 来自哪里？
它是一个单独的变量 var newData = @Html.Raw(Json.Encode(Model));
我在 todos 数组中添加了 newData，一切似乎都正常（因为没有错误），但由于某种原因它只是没有在开发人员工具中更新，它的显示如下：data > todos Array[1] > 0: Object > 然后是所有数据

【解决方案3】：

有两件事会导致此问题：

将data 创建为函数是一种很好的做法。
在finditem() 方法中变量newdata 的引用应该是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;
        }
    }
});

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

【讨论】：