I want to provide form (in vuejs) that adds new input when previous one is filled. Cleared inputs should be removed. At minimum there has to be one input. So far so good, got this in the jsfiddle
Create 3 items, enter a to first input, b to second and c to third. Now delete b text. Item c also goes missing. Any idea why is that? Logging function displays c being at index 1 of array so it should be there but vue does not render the item.
Disclaimer: I do not know why the bug described in the question occurs. It may be the v-for causing DOM input values and component private state to become out of sync. Please share if you know the cause of this behaviour
You are right that this.list is being updated correctly. You can see this by logging out the names beside the input fields:
var demo = new Vue({
el: '#demo',
data: {
items: []
},
methods: {
'manage': function(old, new_) {
var i = this.items.length;
while (i--) {
if (!this.items[i]['name']) {
this.items.$remove(this.items[i]);
}
}
}
},
watch: {
'items': {
handler: 'manage',
deep: true
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="demo">
<div v-for="n in items.length + 1">
{{ items[n]['name'] }}
<input v-model="items[n]['name']"/>
</div>
</div>This can be fixed by calling manage on keyup rather than whenever the list changes.
Here is how to implement similar behavior on keyup:
var demo = new Vue({
el: '#demo',
data: {
items: []
},
methods: {
'manage': function(old, new_) {
var i = this.items.length;
while (i--) {
if (!this.items[i]['name']) {
this.items.$remove(this.items[i]);
}
}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div id="demo">
<div v-for="n in items.length + 1">
<input v-model="items[n]['name']" @keyup="manage"/>
</div>
</div>Also, you're using the minified version of vue. If you use the unminified version you'll see that your code is prompting some warnings. They could be contributing to the unexpected behavior.
I would think that your third item, third input, has a dependency on the second. You should split your data set outside of your loop and handle the removed item in another method. Your looping through the same data set, so if you modify it one area it shows in all. By adding/removing items to an outside data set you can remove the dependency.
v-forto iterate over a range may be causing DOM input values and component private state to become out of sync.