javascript - 尝试使用 @click ="checkedInput"在 Vuejs 中显示复选框标签时出现问题？

Question

new Vue({
  el: '#app',
  data: {
    checkedNames: [],
    checkedName: true,
    close: false
  },
  methods: {
    uncheck: function(checkedName) {
      this.checkedNames = this.checkedNames.filter(name => name !== checkedName);
    },
    uncheckall: function(event) {
      this.checkedNames = [];
    },
    mouseOver: function() {
      this.close = true;

    },
    mouseOut: function() {
      this.close = false;
    },
    checkedInput(event) {
      if (this.checkedNames.includes(event.target.value)) {
        this.uncheck(event.target.value)
      } else {
        this.checkedNames.push(event.target.value)
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div id='app'>
  <ul class="checkboxes">
    <li><input type="checkbox" id="jack" value="Jack" @click="checkedInput">
      <label for="jack">Jack</label></li>

    <li><input type="checkbox" id="john" value="John" @click="checkedInput">
      <label for="john">John</label></li>

    <li><input type="checkbox" id="mike" value="Mike" @click="checkedInput">
      <label for="mike">Mike</label></li>
  </ul>
  <br/>
  <ul class="tags">
    <li @mouseover="mouseOver" @mouseleave="mouseOut" @click="uncheck(checkedName)" class="badge badge-pill badge-primary" v-for="checkedName in checkedNames">
      {{ checkedName }}<span v-show="close" aria-hidden="true">&times;</span>
    </li>
    <li class="badge badge-pill badge-danger" @mouseover="mouseOver" @mouseleave="mouseOut" @click="uncheckall" v-show="checkedNames != ''">Clear</li>
  </ul>
</div>

但是在不使用 v-model 的情况下，我想使用 @click 来执行。上面代码的问题是(在方法中我猜是checkedInput)。
但是上面的代码有一个小错误，即单击复选框后，它会显示选中的复选框标签，但是，
当我使用标签清除时，复选框不会取消选中。 2.)选择所有复选框后，如果我点击清除，复选框不会取消选中，如果我尝试手动取消选中复选框，那么在取消选中标签后打印值和第二个复选框标签不打印。

Answer 1

使用 v-model让它直截了当。这是一个带有一些重构的解决方案:

new Vue({
  el: '#app',
  data: () => ({ checkedNames: [], close: false }),
  methods: {
    uncheck(checkedName) { this.checkedNames = this.checkedNames.filter(name => name !== checkedName); },
    uncheckall() { this.checkedNames = []; },
    mouseOver() { this.close = true; },
    mouseOut() { this.close = false; }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div id="app">
  <ul class="checkboxes">
    <li>
      <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
      <label for="jack">Jack</label>
    </li>
    <li>
      <input type="checkbox" id="john" value="John" v-model="checkedNames">
      <label for="john">John</label>
   </li>
    <li>
      <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
      <label for="mike">Mike</label>
    </li>
  </ul>
  <br/>
  <ul class="tags">
    <li 
      v-for="(checkedName, checkedNameId) in checkedNames"
      :key="checkedNameId"
      @mouseover="mouseOver" 
      @mouseleave="mouseOut" 
      @click="uncheck(checkedName)" 
      class="badge badge-pill badge-primary" 
    >
      {{ checkedName }}<span v-show="close" aria-hidden="true">&times;</span>
    </li>
    <li 
      class="badge badge-pill badge-danger" 
      @mouseover="mouseOver" 
      @mouseleave="mouseOut" 
      @click="uncheckall" 
      v-show="checkedNames.length"
    >
      Clear
    </li>
  </ul>
</div>

编辑:
由于您不想使用上述解决方案，因此您的方法的问题是数组 checkedNames不是与输入的双向绑定(bind)，因此更改不会反射(reflect)在模板上。因此，您可以做的是从头开始填写并使用 v-for呈现具有修改 checked 能力的复选框每个属性。要呈现下面的标签，您可以创建 computed列出检查项目的属性:

new Vue({
  el: '#app',
  data: () => ({ checkedNames: [ { id:1, name:"Jack", checked:false }, { id:2, name:"John", checked:false }, { id:3, name:"Mike", checked:false } ], close: false }),
  computed: {
    checkedLabels() { return this.checkedNames.filter(({ checked }) => checked === true); }
  },
  methods: {
    uncheckall() { this.checkedNames.forEach(item => item.checked=false); },
    mouseOver() { this.close = true; },
    mouseOut() { this.close = false; },
    checkedInput(checkId) {
      const item = this.checkedNames.find(({ id }) => id === checkId);
      item.checked = !item.checked;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div id='app'>
  <ul class="checkboxes">
    <li
      v-for="({ id, name, checked }) in checkedNames"
      :key="id"
    >
      <input 
        type="checkbox" 
        :id="name" 
        :value="name" 
        :checked="checked" 
        @click="checkedInput(id)"
      >
      <label :for="name">{{name}}</label>
    </li>
  </ul>
  <br/>
  <ul class="tags">
    <li 
      v-for="({ id, name}) in checkedLabels"
      :key="id"
      @mouseover="mouseOver" 
      @mouseleave="mouseOut" 
      @click="checkedInput(id)" 
      class="badge badge-pill badge-primary" 
    >
      {{ name }}<span v-show="close" aria-hidden="true">&times;</span>
    </li>
    <li 
      class="badge badge-pill badge-danger" 
      @mouseover="mouseOver" 
      @mouseleave="mouseOut" 
      @click="uncheckall" 
      v-show="checkedLabels.length"
    >Clear</li>
  </ul>
</div>