javascript - Vue.js 使复选框的行可点击

Question

我正在尝试使列表项可点击。单击该项目时，应启用或禁用列表项中的复选框。然而它并没有按照我预期的方式工作。

我举了一个例子:

var app = new Vue({
  el: '#app',
  data: {
    showNav: false,
    categories: [{name: 'test' }]
  },
  mounted() {

    this.categories.forEach((category) => {
      category.active = true;
    });
  }
})

<div id="app">
  <nav class="navbar-dropdown w-full">
      <ul class="list-reset">
          <li class="flex justify-between items-center hover:bg-grey hover:text-white text-grey uppercase cursor-pointer p-3" v-for="category in categories" @click="category.active = !category.active">
              {{ category.name }}
              <input type="checkbox" class="shadow" v-model="category.active" @click="category.active = !category.active"/>
          </li>
      </ul>
  </nav>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

当我改变这个:

categories: [{name: 'test' }]

对此:

categories: [{name: 'test', active: true }]

它正在工作。但在我的应用程序中，我使用 ajax 获取应用程序并接收没有事件属性的类别对象。

这就是我这样做的原因:

this.categories.forEach((category) => {
      category.active = true;
    });

但这显然行不通。我该如何解决这个问题？

Answer 1

正如 @ohgodwhy 在他的评论中提到的，为类别定义属性的方式存在问题。我很难解释为什么这不起作用，尽管你可以这样做:

var app = new Vue({
  el: '#app',
  data: {
    showNav: false,
    categories: [{
      name: 'test'
    }],
  },
  mounted() {
    this.categories = this.categories.map((category) => {
      return {
        name: 'test',
        active: true,
      };
    });
  },
});

<div id="app">
  <ul class="list-reset">
    <li class="flex justify-between items-center hover:bg-grey hover:text-white text-grey uppercase cursor-pointer p-3" v-for="category in categories" @click="category.active = !category.active">
      {{ category.name }}
      <input type="checkbox" class="shadow" v-model="category.active" @click="category.active = !category.active" />
    </li>
  </ul>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

对于 OP 出现此问题的原因的任何补充或扩展，我将不胜感激。