Question

我想为i-check创建一个组件，但是在表单提交期间我无法获取v-model数据。

我可以通过普通的输入元素来完成。

以下是一个例子。感谢

<!DOCTYPE html><html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://unpkg.com/vue"></script>
  <title>JS Bin</title>
</head>
<body>
  <div id=wrap>
  <ichecker id="test" checked  v-model="formData.checkbox"></ichecker>
    <!--<input type=checkbox checked v-model="formData.checkbox" />-->
    <button v-on:click.prevent=submit()>Submit</button>
  </div>
</body>
</html>




Vue.component('ichecker', {
props: ['id', 'checked'],
model: {
    prop: 'checked',
    event: 'change'
},
template: "<input type='checkbox' :id='id' />",
mounted: () => {
  // var $el = jQuery(`#${this.id}`);
  // $el.iCheck({.....
}
});

new Vue ({
  el: '#wrap',
  data: {
    formData : {
      checkbox : ''
    }
  },
  methods: {
    submit: function() {
      document.body.appendChild(document.createTextNode(this.formData.checkbox?'true ':'false '));
      // form submission
    }
  }
});

https://jsbin.com/jugerigeto/edit?html,js,output

Answer 1

您处于一个非常特殊的情况，<input>本身就是组件的根元素。因此，如果您想要侦听本机事件，则无法使用v-model，因为它只存在于v-on上。 v-model只是一个很好的想法，你可以这样轻松地做到：

<强> HTML：

<ichecker :checked="formData.checkbox"
    @change.native="formData.checkbox = $event.target.checked">
</ichecker>

<强> JS：

Vue.component('ichecker', {
    prop: ['checked'],
    template: '<input type="checkbox" :checked="checked" />'
});

https://jsbin.com/suvonolita/edit?html,js,output

如果输入不是您的根节点，您可能还希望在没有本机事件的情况下执行此操作。或者你可能真的想要v-model。在那里描述了在自定义组件上实现v-model的方法：https://vuejs.org/v2/guide/components.html#Customizing-Component-v-model

Vuejs 2如何按组件更新v-model

1 个答案: