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

e.preventDefault()内的{p> set_taxable是导致问题的原因。删除该部分工作正常。您可以在此处查看更新的小提琴：https://jsfiddle.net/1Ly7mL6n/9/

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

v-for custom component复选框无法正常工作

1 个答案: