Vuejs 2コンポーネントごとにv-modelを更新する方法

i-check用のコンポーネントを作成したいが、フォームの送信中にv-modelデータを取得できない。Vuejs 2コンポーネントごとに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

出典

2017-04-25 user3204729

「v-model」でiCheckを使用した例としてこのペンを書いています。 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-modelを望むかもしれません。 https://vuejs.org/v2/guide/components.html#Customizing-Component-v-model

出典

2017-04-25 15:31:17 Cobaltway

Vuejs 2コンポーネントごとにv-modelを更新する方法

答えて

関連する問題