所以我有以下结构：
rules:[
0:{
subrule1:'',
subrule2:'',
subrule3:''
},
1:{
subrule1:'',
subrule2:'',
subrule3:''
}
]
我这样循环这个结构：
<div v-for="(fields, index) in rules" :key="index">
<div>
<button @click.prevent="addMore()">
Add Rules
</button>
</div>
<div>
<button @click.prevent="deleteSubrule(index)">
Delete
</button>
</div>
<input
name="subrule1"
:value="getAdditionalIndex(index, 'subrule1')"
/>
<input
name="subrule2"
:value="getAdditionalIndex(index, 'subrule2')"
/>
<input
name="subrule3"
:value="getAdditionalIndex(index, 'subrule3')"
/>
</div>
以下是方法：
getAdditionalIndex(index, field) {
return this.rules[index][field];
},
addMore(){
const fields = {
subrule1:'',
subrule2:'',
subrule3:''
};
this.rules.push(fields)
},
deleteSubrule(index){
this.$delete(this.rules, index)
}
它不会绑定，并且在删除时抛出错误。我做了一些搜索，大多数人都说深度观察者，但他们对深度观察者的利用通常与子组件一起使用，而不是在v-for上。有没有办法以这种方式利用深度观察者？
这里有一个可运行的片段：
<html>
<div id="app">
<div>
<button @click.prevent="addMore()">
Add Rules
</button>
</div>
<div>
<button @click.prevent="showStates()">
Show state results
</button>
</div>
<div v-for="(fields, index) in rules" :key="index">
<div>
<button @click.prevent="deleteSubrule(index)">
Delete
</button>
</div>
<input
name="subrule1"
:value="getAdditionalIndex(index, 'subrule1')"
@input="inputChange"
/>
<input
name="subrule2"
:value="getAdditionalIndex(index, 'subrule2')"
@input="inputChange"
/>
<input
name="subrule3"
:value="getAdditionalIndex(index, 'subrule3')"
@input="inputChange"
/>
</div>
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue@2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
rules:[],
test:''
}
},
methods:{
addMore(){
const fields = {
subrule1:'',
subrule2:'',
subrule3:''
};
this.rules.push(fields)
},
deleteSubrule(index){
this.$delete(this.rules, index)
},
getAdditionalIndex(index, field) {
return this.rules[index][field];
},
inputChange(event){
return event.target.value
},
showStates(){
alert(JSON.stringify(this.rules))
}
}
});
</script>
</html>与其传递术语additional，不如将index传递给getAdditionalIndex方法
<html>
<div id="app">
<div>
<button @click.prevent="addMore()">
Add Rules
</button>
</div>
<div v-for="(fields, index) in rules" :key="index">
<div>
<button @click.prevent="deleteSubrule(index)">
Delete
</button>
</div>
<input
name="subrule1"
:value="getAdditionalIndex(index, 'subrule1')"
/>
<input
name="subrule2"
:value="getAdditionalIndex(index, 'subrule2')"
/>
<input
name="subrule3"
:value="getAdditionalIndex(index, 'subrule3')"
/>
</div>
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue@2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
rules:[]
}
},
methods:{
addMore(){
const fields = {
subrule1:'',
subrule2:'',
subrule3:''
};
this.rules.push(fields)
},
deleteSubrule(index){
this.$delete(this.rules, index)
},
getAdditionalIndex(index, field) {
return this.rules[index][field];
},
}
});
</script>
</html>但我建议您在输入字段中使用v-model，以防止在添加新行时清空它，因此您不再需要getAdditionalIndex方法
<html>
<div id="app">
<div>
<button @click.prevent="addMore">
Add Rules
</button>
</div>
<div v-for="(fields, index) in rules" :key="index">
<div>
<button @click.prevent="deleteSubrule(index)">
Delete
</button>
</div>
<input
name="subrule1"
v-model="fields.subrule1"
/>
<input
name="subrule2"
v-model="fields.subrule2"
/>
<input
name="subrule3"
v-model="fields.subrule3"
/>
</div>
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue@2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
rules:[]
}
},
methods:{
addMore(){
const fields = {
subrule1:'',
subrule2:'',
subrule3:''
};
this.rules.push(fields)
},
deleteSubrule(index){
this.$delete(this.rules, index)
},
}
});
</script>
</html>