this is the code section `< div id= "main" >
<record v-for="item in words"
:item="item"
:key="item.id">
</record>
<button @click="change">change</button>
</div>
<script type="text/javascript">
Vue.component("record",{
props:["item"],
template:"<div><input type="text" name="" v-model="name">{{item.name}}</div>",
data(){
return{
name:this.item.name
}
}
});
new Vue({
el:"-sharpmain",
data:{
words:[
{name:"wang"},
{name:"wang1"},
{name:"wang2"},
{name:"wang3"},
{name:"wang4"},
{name:"wang5"},
{name:"wang6"},
{name:"wang7"}
]
},
methods:{
change(){
this.words.splice(0,3);
}
}
});
</script>` the results after running are as follows:
changewords:
the value in the input box and the value on the right side of the input box are not Synchronize, it should be the same in theory, this is just a small example, it is not clear what the principle is, ask the boss for advice?