vue中点击展示数组里的对象、数组对象单个展示

今天朋友碰见一个需求，就是后端接口返回一个数组，刚开始只展示数组中第一个对象，然后点击对象中的某个按钮会展示数组第二个对象，以此类推。

 自己写了个数组

我的思路呢就是在页面初始化展示的时候，把请求回来的数组下标为1的数组对象push进一个新数组

 

 这个this.j是我在data里声明的一个变量，这样的话在展示这个数组的时候就会只展示第一个

他们的业务是点击data里面的list里的某个对象然后触发data这个数组的下个对象

给需要点击的添加点击事件

 

 我这里只是做个演示，正常情况下使用v-if进行判断的，stutas=1时代表的是为选中状态也就第二个对象展示的样式，0代表的就是第一个已经选中的

 这里就是实现这个功能最主要的部分

下面是完整的代码，可以开个新页面看下效果

<template>
  <div>
    <div class="app">
      <div v-for="(item, index) in list" :key="index">
        <div class="list">
          <span>{{ item.name }}</span>
          <span
            v-show="item.stutas == 1"
            id="name"
            v-for="(i, y) in item.list"
            :key="y"
            @click="buttonClick(i)"
          >
            {{ i.name }}
          </span>
          <span
            v-show="item.stutas == 0"
            style="margin-left: 30px; color: red"
            >{{ item.title }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: 1,
      data: [
        {
          stutas: 1,
          id: 1,
          name: "aa",
          list: [
            { cid: 1, id: 1, name: "11111" },
            { cid: 1, id: 2, name: "22222" },
            { cid: 1, id: 3, name: "3333" },
          ],
        },
        {
          stutas: 1,
          id: 2,
          name: "bb",
          list: [
            { cid: 2, id: 1, name: "2222" },
            { cid: 2, id: 2, name: "1111" },
            { cid: 2, id: 3, name: "0000" },
          ],
        },
        {
          stutas: 1,
          id: 3,
          name: "cc",
          list: [
            { cid: 3, id: 1, name: "33333" },
            { cid: 3, id: 2, name: "22222" },
            { cid: 3, id: 3, name: "0000" },
          ],
        },
        {
          id: 4,
          stutas: 1,
          name: "dd",
          list: [
            { cid: 4, id: 1, name: "11111" },
            { cid: 4, id: 2, name: "22222" },
            { cid: 4, id: 3, name: "3333" },
          ],
        },
      ],
      j: 0,
      list: [],
    };
  },
  mounted() {
    this.index();
  },
  methods: {
    index() {
      this.list.push(this.data[this.j]);
    },
    buttonClick(i) {
      let list = this.list;
      for (let index = 0; index < list.length; index++) {
        if (list[index].id == i.cid) {
          list[index].title = i.name;
          this.data[this.j].stutas = 0;
          this.j++;
        }
      }
      this.click();
    },
    click() {
      if (this.list.length < this.data.length) {
        this.list.push(this.data[this.j]);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.app {
  width: 100%;
  height: 500px;
  background-color: blue;
  .list {
    width: 50%;
    margin: 30px auto;
    color: #ffffff;
    font-size: 24px;
    #name {
      margin: 0 30px;
    }
  }
}
</style>