最近开始研究vue,但是遇到一个问题:通过v-for组件,在这个组件上挂一个监听器,希望通过把被点击的卡片的id放在里面来“选择”这个元素activeItem,但最终单击时没有任何变化。 主要组件代码:
<template>
<div v-for="card in cards" :key="card.id">
<Cards :Card="card" @click="this.activeItem = card.id"></Cards>
</div>
</template>
<script>
import Cards from "@/components/Cards";
export default {
name: 'App',
components: {
Cards
},
data() {
return {
cards: [
{id: 1, name: 'first', description: 'card 1'},
{id: 2, name: 'second', description: 'card 2'},
{id: 3, name: 'third', description: 'card 3'}
],
activeItem: 0,
}
},
computed: {
},
methods: {
}
}
</script>
<style>
</style>
这是卡片组件代码:
<template>
<div>
{{Card.id}}
</div>
<div>
{{Card.name}}
</div>
</template>
<script>
export default {
name: 'Cards',
props: {
Card: Object,
}
}
</script>
<style scoped>
</style>