JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<template id="list-example">
<button @click='changeNamex'>
Change ME
</button>
<button @click='addName'>
Add ME
</button>
<div v-for="item in items" track-by='$index'>
{{item.id}} - {{names[item.id].value}}
</div>
</template>
JavaScript
var vm = new Vue({
el: "#list-example",
data: {
items: [
{
id: 'namex'
},
{
id: 'namex'
}
],
names: {
'namex': {
value: 'John'
}
}
},
methods: {
changeNamex: function(){
this.names['namex'] = {
value: 'Smithytrurutr'
};
},
addName: function(){
var id = 'name'+ parseInt(10*Math.random());
var that = this;
this.items.push({
id: id
});
that.names[id] = {
value: id + '*' + new Date().getTime()
}
// this.$set('names', this.names);
}
}
});