主页 / 问题 / 1134625
Accepted
dmitriy
Asked:2020-06-01 19:12:21 +0000 UTC2020-06-01 19:12:21 +0000 UTC

单击按钮不会更改列表

  • 772

有一个元素列表，每个元素都有一个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>
javascript

1 个回答

  1. Best Answer

    您的问题如下，您showMore更改了方法中计算的值personList。不应该这样做。这是为您提供的解决方案。

    new Vue({
  el: '#app',
  template: `
    <div>
      <div v-for="item in list" :key="item.id">
        <h2>Name:{{ item.name }}</h2>
        <div v-if="statusShow[item.id]" key="show">Description: {{ item.desc }}</div>
        <button v-else key="not_show" type="button" @click="showMore(item.id)">Show more</button>
      </div>
    </div>  
  `,
  data() {
    return {
      list: [
        {
          id: "id0",
          name: "Name0",
          desc: "Desc0",
        },
        {
          id: "id1",
          name: "Name1",
          desc: "Desc1",
        },
        {
          id: "id2",
          name: "Name2",
          desc: "Desc2",
        },
      ],
      statusShow: {},
    };
  },
  methods: {
    showMore(id) {
      this.$set(this.statusShow, id, true);
    },
  },
})
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>

    • 0

相关问题