Question

我试图让列表项可点击。单击该项时，应启用或禁用列表项中的复选框。然而，它没有像我期望的那样工作。

我做了一个例子：

＆＃13;

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

＆＃13;

<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"/>

＆＃13;

当我改变这个时：

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, }; }); }, });定义属性的方式存在问题。我很难解释为什么这不起作用，尽管你可以这样做：

＆＃13;

<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>

＆＃13;

  {
    id="${__UUID}",
    name="abc",
    age="34"
   }

＆＃13;

我很感激OP对此问题的任何补充或扩展。

Vue.js可以为复选框

1 个答案: