Question

我正在尝试将活动类@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的clicked元素上设置一个活动类。我已经像that一样尝试过。

但这会给数组中的每个第一个元素提供该类。

我该如何解决？

Answer 1

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

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-活动类

1 个答案: