嵌套 V-For active Class

Question

我正在尝试将活动的 class @click 绑定到对象数组中的嵌套项。

我有以下数组：

var arr =
[
  {
    "id": 10,
    "name": "Main Name 1"
    "parents": {
      "id": 1,
      "name": "Name1"
    }
  },
  {
    "id": 11,
    "name": "Main Name 2"
    "parents": [
      {
        "id": 2,
        "name": "Name2"
      },
      {
        "id": 3,
        "name": "Name3"
      }
    ]
  }
]

在 Vue.js 我像这样遍历这个数组：

<v-col cols="2" v-for="main in arr" :key="main.id">
  <b>Table {{main.name}}</b>
  <v-card
  class="ma-2 pb-6"
  v-for="parent in main.parents" :key="parent.id"
  @click="doSomeStuff"
  >
    <v-card-title>{{parent.name}}</v-card-title>
  </v-card>
</v-col>

我想在嵌套 v-for 的点击元素上设置活动 class。我已经试过了 that。

但这给出了数组中每个第一个元素class。

我该如何解决？

Answer 1

您可以保留最后单击的元素的 ID，并根据该 ID 绑定 class。

arr 的格式也有误。

Conditional class binding

Vue.config.productionTip = false
Vue.config.devtools = false


new Vue({
  el: '#app',
  data: {
    activeId: -1,
    arr: [{
        id: 10,
        name: "Main Name 1",
        parents: [{
          id: 1,
          name: "Name1"
        }]
      },
      {
        id: 11,
        name: "Main Name 2",
        parents: [{
            id: 2,
            name: "Name2"
          },
          {
            id: 3,
            name: "Name3"
          }
        ]
      }
    ]
  },
  methods: {
    setActive(id) {
       this.activeId = id;
    }
  }
});

.active {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div cols="2" v-for="main in arr" :key="main.id">
    <h2>Table {{main.name}}</h2>
    <div class="ma-2 pb-6" v-for="parent in main.parents" :key="parent.id" @click="setActive(parent.id)" :class="{ 'active' : activeId === parent.id}">
      <h3>{{parent.name}}</h3>
    </div>
  </div>
</div>

嵌套 V-For active Class

Nested V-For active Class

javascript

vue.js

v-for