[英]Vuejs 2 How to update v-model by component
我想为 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
}
}
});
您处于一个非常特殊的场景中,其中<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/suvoolita/edit?html,js,输出
如果输入不是您的根节点,您可能还想在没有本机事件的情况下执行此操作。 或者你可能真的想要 v-model。 那里描述了在自定义组件上实现 v-model 的方法: https ://v2.vuejs.org/v2/guide/components.html#Customizing-Component-v-model
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.