我已经阅读了使用 v-for here在列表中呈现自定义组件的文档。
但由于某种原因,我无法让它工作。它总是删除最后一个组件,而不是我在索引中发送的那个。知道为什么它不起作用吗?
我的 VUE JS 版本是:2.5.16。
使用 PHPStorm IDE 并在 docker(linux 容器)上运行
和 Laravel 混合(我在 package.json 中有"laravel-mix": "0.*"条目)使用 webpack 并编译 JS 模块。
这是我的一些代码
// Parent Component JS
<template>
<ul>
<li
is="child-component"
v-for="(child, index) in componentList"
:key="index"
:myVal="Something...."
@remove="dropField(index)"
@add-custom-field="addField"
></li>
</ul>
</template>
<script>
import childComponent from './ChildComponent';
export default {
name: 'CustomList',
components: {'child-component' :childComponent},
data() {
return {
componentList: []
}
},
methods: {
addField() {
console.log('Handling add-custom-field field...');
this.componentList.push(childComponent);
},
dropField(index) {
console.log(`I am deleting the component with index = ${index} from listview in parent...`);
this.componentList.splice(index, 1);
}
}
}
// Child Component JS
<template>
<div>
<input type="text" v-model="currentValue" /><button @click.prevent="$emit('remove')" > Remove </button>
</div
</template>
<script>
export default {
props: { myVal : '' },
data() { return { currentValue: ''} },
created() {this.currentValue = this.myVal;}
}
</script>