Vuejs 2如何按组件更新v模型

我想为i-check创建组件，但无法在表单提交期间获取v模型数据。Vuejs 2如何按组件更新v模型

我可以通过正常的输入元素。

下面是一个例子。由于

<!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

来源

2017-04-25 user3204729

我写了这个笔作为使用iCheck和v模型的示例。 http://codepen.io/Kradek/pen/OmMvEJ?editors=1010 – Bert

你是在一个非常特殊的情况，其中<input>本身是组件的根元素。因此，如果您想监听本地事件，则不能使用v-model，因为它只存在于v-on上。 V模型只是一个shorcut思想，你可以很容易地做到这一点是这样的：

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型模型。在此处描述了在自定义组件上实现v模型的方法：https://vuejs.org/v2/guide/components.html#Customizing-Component-v-model

来源

2017-04-25 15:31:17 Cobaltway

Vuejs 2如何按组件更新v模型

回答

相关问题