Значение привязки не обновляется при изменении

Question

Мне удалось создать значения для разных входных данных, но если я внесу изменение на странице, оно отображается правильно в форме, но когда я использую инструменты разработчика и проверю, обновлено ли изменение там, это не Обновить. Я пробовал разные способы v-bind: значение или v-модель, но он не реагирует. Я бы хотел, чтобы он мог реагировать так, чтобы мне не приходилось переходить к каждому входу и получать обновленное значение, я мог просто вызвать массив, который был создан с обновленными значениями. Не уверен, что мне не хватает.

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;
        }
    }

Answer 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: []
})

Обновление

Я обновил вашу скрипку . Входные данные теперь отображаются на основе условных операторов в шаблоне и удаляют зависимость jQuery.

Answer 2

Эта проблема может быть вызвана двумя причинами:

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

Нет, я не тестировал этот код ...

Answer 3

Данные должны быть функцией, которая возвращает объект, а не просто такой объект, как:

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

Также finditem() должно быть вычисляемым свойством как:

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 автоматически получает правильные данные.
Попробуйте эти изменения и посмотрим, обновит ли он данные.