javascript - VueJs动态按钮值

Question

所以我正在循环遍历我的 allItems 对象数组，并且我想在单击某个按钮时显示一些内容。

所有项目

allItems = [
   {
       title: 'test',
       show: false,
       description: 'this is test'
   },
   {
       title: 'test 1',
       show: false,
       description: 'the test 1'
   }
]

List.vue

v-col cols="3" v-for="item in allItems" :key="item.id">
      <v-card width="100%">

        <v-card-text>
          <span class="text--primary">
            <span class="title">{{ item.title.substring(0,28)+".." }}</span>
          </span>
        </v-card-text>

        <v-card-actions>
          <v-btn icon @click="item.show = !item.show">
            <v-icon>{{ item.show ? 'mdi-menu-up' : 'mdi-menu-down' }}</v-icon>
          </v-btn>
        </v-card-actions>
        <v-expand-transition>
          <div v-if="item.show">
            <span class="pt-10">{{ item.description }}</span>
          </div>
        </v-expand-transition>
      </v-card>
 </v-col>

我的问题是，当单击按钮时，它不会打开描述。

编辑

看来我没有提供太多信息。我正在使用 Vuex 来处理我的状态。

PS:我不再将计算值传递给子组件。

在我的List.vue脚本中

import { mapActions, mapGetters } from "vuex";

export default {
data: () => ({}),
methods: {
  ...mapActions(["fetchItems"])
},
created() {
  this.fetchItems();
},
computed: mapGetters(["allItems"])
};

Answer 1

从您对评论的回复中，我看到您正在将数据作为 Prop 传递，并希望它具有反应性。 在 Vue 中，所有 props 在子属性和父属性之间形成单向绑定(bind)。

因此，要被动地更改 prop 值，您可以:

1. 设置一个数据值，您将为其分配 props 值，以便您可以被动地更改状态数据。

2. 您也可以从 prop 定义计算值并使用计算值代替

了解有关 vue docs 的更多信息