While experimenting with Vue.js, I encountered a puzzling issue that has left me perplexed. Here is the code snippet that showcases the problem:
Vue.component('list-entry', {
'template': '<input type="text" :value="t" @input="fireEvent()" ref="text">',
'props': ['t', 'idx'],
'methods': {
fireEvent() {
this.$emit('update:t', {
'value': this.$refs.text.value,
'idx': this.idx
})
}
}
})
new Vue({
el: "#app",
data: () => ({
texts: [
'Foo', 'Bar', 'Baz'
]
}),
methods: {
update(ev) {
console.log('Set ' + ev.value + ' at index ' + ev.idx)
this.texts[ev.idx] = ev.value
console.log(this.texts)
}
}
})input {
display: block;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class='container'>
<list-entry
v-for="(t, idx) in texts"
:key="t"
:t="t"
:idx="idx"
@update:t="update($event)"
></list-entry>
</div>
{{ texts }}
</div>To provide some context, there is a global data property texts that holds multiple strings. Each string is passed to a unique custom component called list-entry using v-bind.
Whenever there's a change in the input text fields, the goal is to update the global data property dynamically. To achieve this, an update:t event is triggered and handled within the main app. The function update(ev) should take care of updating the data.
Upon running the code, you'll notice that the console displays the correct messages and the array is updated accordingly. However, the values do not reflect in the HTML output (replaced from {{ texts }}). This inconsistency has left me baffled. Is the data truly being updated? Why does it fail to render in the mustache notation but logs correctly in the console?