Vuejs 2 Wie aktualisiere ich V-Modell nach Komponente

Ich möchte eine Komponente für i-Check erstellen, aber ich kann nicht die V-Modell-Daten während der Formularübergabe erhalten.Vuejs 2 Wie aktualisiere ich V-Modell nach Komponente

Ich kann es über normale Eingabeelement tun.

Unten ist ein Beispiel. Dank

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

Quelle

2017-04-25 user3204729

Ich schrieb diesen Stift als ein Beispiel für die Verwendung von iCheck mit 'V-Modell'. http://codepen.io/Kradek/pen/OmMvEJ?editors=1010 – Bert

Sie sind in einer ganz bestimmten Szenario, in dem die <input> sich das Wurzelelement Ihrer Komponente ist. Sie können also das V-Modell nicht verwenden, wenn Sie das native Ereignis anhören möchten, weil es nur auf v-on existiert. V-Modell ist nur ein shorcut Gedanke, und man kann es leicht zu tun, wie folgt:

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

Sie Vielleicht möchten Sie es auch ohne das native Ereignis tun, wenn die Eingabe nicht Ihr Wurzelknoten ist. Oder Sie wollen wirklich V-Modell. Die Möglichkeit, v-model für eine benutzerdefinierte Komponente zu implementieren, ist dort beschrieben: https://vuejs.org/v2/guide/components.html#Customizing-Component-v-model

Quelle

2017-04-25 15:31:17 Cobaltway

Vuejs 2 Wie aktualisiere ich V-Modell nach Komponente

Antwort

Verwandte Themen