有一个元素列表,每个元素都有一个Show more按钮,问题是当你在控制台点击按钮时,可以看到isOpen键元素发生了变化,但是页面上的元素并没有打开, 可能是什么问题呢?
在 App.vue 中,我获取请求中的项目,然后添加 isOpen 参数并将列表传递给 Items 组件
应用程序.vue
<Items :matches="matches" />
methods() {
async getItems() {
const response = await axios.get('api/items');
if (data.checkResult.response.length) {
this.matches = data.checkResult.response.map((item) => {
item.isOpen = false;
return item;
});
}
}
}
物品.vue
<template>
<div v-for="(elem, indexElem) in personList" :key="indexElem">
<div>{{ elem.text }}
<div class="elem.isOpen ? 'active' : ''" @click="showMore(indexElem)">Show more</div>
</div>
</template>
<script>
export default {
props: {
matches: {
type: Array,
required: false,
default: () => [],
},
},
computed: {
personList() {
const newMatchesArray = this.matches.map((elem) => { Делаю нужные изменения ...});
return newMatchesArray;
}
},
methods: {
showMore(ind) {
this.personList[ind].isOpen = !this.personList[ind].isOpen;
},
},
}
</script>
您的问题如下,您
showMore
更改了方法中计算的值personList
。不应该这样做。这是为您提供的解决方案。