[Vuejs]-Binding value doesn't update on change

Data should be a function which returns an object and not just an object like:

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

Also finditem() should be a computed property like:

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

And than you call the computed property like:

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

Methods don’t get called again automatically if you variable/dependency is changed which gets used inside the method.
Computed porperty get called again if a variable/dependency is changed and so v-for gets the correct data automatically.
So try these changes and let’s see if it updates the data.

I see a few issues here:

1. item is not within v-for, rather li elements are siblings to the first with the loop. Merge all li elements together and use the v-if and v-if-else conditionals on the inputs instead.

2. data is an object and not a function.

3. No key attribute on li.

template

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

script

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

Update

I’ve updated your fiddle. The inputs now render based on the conditional statements in the template and removed the jQuery dependency.

There are 2 things that can cause this issue:

1. Its good practice to create your data as a function.
2. The reference of your variable newdata within your finditem() method should be this.todos[0] or but shouldn’t you use this.todos as an empty array?. This is because newData is a variable or string or number or whatever?

Your code should look something like (thinking newData is a string within the todos array):

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

Nope, I did not test this code…