VueJS. V-Modell in benutzerdefinierter Komponente

Question

HTML:

<products-list v-model="product.name" v-on:keyup="productName"></products-list> 

JS:

Vue.component('products-list', { 
    template: 
     `<input class="product_name form-control" contenteditable="true"></input>`, 
}); 

var app = new Vue({ 
    el: '#app', 
    data: { 
     items: items, 
     product: { 
      name: "", 
     } 
    }, 
    methods: { 
     productName: function() { 
      console.log(product.name); 
     } 
    } 
}); 

Als ich in dem Eingabefeld eingeben beginne Ich möchte diese Daten in der Konsole erhalten, aber es derzeit ist leer. Was mache ich falsch?

Answer 1

v-model verwendet standardmäßig das Ereignis @input. Wenn Sie also v-model für eine benutzerdefinierte Komponente verwenden möchten, müssen Sie das Eingabeereignis an das übergeordnete Element senden. Also, in Ihrer Komponente, tun Sie einfach:

<input class="product_name form-control" @input="$emit('input', $event.target.value)" />

Jetzt in Ihren Eltern können Sie tun:

<products-list v-model="product.name"></products-list>

Sie können das vollständige Beispiel auf dieser JSFiddle sehen: https://jsfiddle.net/7s2ugt11/