Vue.js实现列表项点击切换复选框状态问题求助

我明白你想实现点击整个列表项时，里面的复选框能切换选中/未选中状态对吧？咱们一步步来调整你的代码，搞定这个问题：

1. 补全并优化模板结构 #

首先把你没写完的<li>内容补全，给列表项添加点击事件，同时给复选框绑定状态关联：

<div id="app"> 
  <nav class="navbar-dropdown w-full"> 
    <ul class="list-reset"> 
      <li 
        class="flex justify-between items-center p-2 hover:bg-gray-100 cursor-pointer"
        @click="toggleCategory(category)"
      >
        <span>{{ category.name }}</span>
        <input 
          type="checkbox" 
          v-model="category.active"
          @click.stop <!-- 阻止复选框点击事件冒泡，避免重复触发切换逻辑 -->
        >
      </li>
    </ul> 
  </nav>
</div>

2. 添加状态切换方法到Vue实例 #

在你的Vue代码里新增一个方法，用来处理列表项点击时的状态切换：

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

关键细节解释 #

• 给<li>绑定@click事件，调用toggleCategory方法并传入当前分类对象，这样就能直接修改它的active属性。
• 复选框用v-model="category.active"实现双向绑定，active值的变化会同步到复选框状态，反之复选框的操作也会更新active值。
• 给复选框加@click.stop是核心：如果不加，点击复选框时事件会冒泡到<li>，导致切换逻辑被触发两次，状态会来回跳一次，最终和预期相反，这个阻止冒泡的操作能避免这个问题。

这样调整后，不管点击列表项的哪个区域（包括复选框本身），都能正常切换复选框的启用/禁用状态啦。

内容的提问来源于stack exchange，提问作者Jenssen