V-for 自定义组件复选框不起作用

Question

我正在使用带有自定义组件的 v-for

Vue.component('lineitem', {
  template: '#lineitem-template',
  props: {
    item: {
      required: false,
      default: null
    },
  },
  computed: {
    local_line_item() {
      console.log("Re computing line item")
      return _.clone(this.item)
    },
  },
  methods: {
    set_taxable(e) {
      e.preventDefault();
      if (this.local_line_item.taxable == false) {
        this.local_line_item.taxable = true;
      } else {
        this.local_line_item.taxable = false;
      }
      console.log("Changing taxable to ", this.local_line_item);
    },
  }
});

使用此模板：

<template id="lineitem-template">
  <tr>
    <td>
      <input type="text" class="form-control" v-model="local_line_item.cost">
    </td>
    <td>
      <div class="option" @click="set_taxable">
        <input type="checkbox" v-model="local_line_item.taxable" v-bind:true-value="true" v-bind:false-value="false">
        <label for="check1"></label>
      </div>
    </td>
  </tr>
</template>

请参阅此 JSFiddle：https://jsfiddle.net/shaunc869/1Ly7mL6n/7/

当我单击复选框时，我正在更改内部变量的值，但复选框没有更改，我做错了什么？谢谢！

Answer 1

set_taxable内部e.preventDefault()是问题的原因。删除该部分就可以了。您可以在此处看到更新的小提琴：https://jsfiddle.net/1Ly7mL6n/9/

另外，我不明白您使用单击绑定触发set_taxable背后的理由。由于已使用v-model绑定根据复选框的选中状态切换local_line_item.taxable，因此不需要单击处理程序。因此，除非您计划在单击处理程序中执行更多操作，否则您也可以将其删除。