コンポーネントテンプレート内からvモデルを使用することはできますか？

Question

V-model構文をVueコンポーネントテンプレートの内部から使用できますか？

.htmlのテンプレートが機能しないコンポーネントに次のものを置く

<input type="text" v-model="selected_service_shortname"> 

に直接含まれる場合に予想されるように、以下の作品。 vue.min.js:6 ReferenceError: selected_service_shortname is not defined

で

var service_details = { 
    template: ` 
    ... 
    <input type="text" v-model="selected_service_shortname"> 
    ... 
` 
}; 


vm = new Vue({ 
    el: "#app", 
    components: { 
     'service-details': service_details 
    }, 

結果は

<input type="text" v-model="this.$parent.selected_service_shortname"> 

にテンプレートの構文を変更する作業を途中ようだ - 予想通りselected_service_shortnameに外部から適用された変更は、入力ボックスに表示されます。しかし、入力ボックスを直接変更すると、Uncaught TypeError: Cannot convert undefined or null to object

私はサポートされているユースケースをしようとしていますか？もしそうなら、どこかの実例がありますか？

Answer 1

v-modelのサポートをコンポーネントに実装できます。これは文書hereに記載されています。

ここは例です。

var service_details = { 
    props: ["value"], 
    template: ` 
      <input type="text" v-model="internalValue"> 
     `, 
    computed: { 
    internalValue: { 
     get() { 
     return this.value 
     }, 
     set(v) { 
     this.$emit("input", v) 
     } 
    } 
    } 
}; 

基本的には、v-modelは、デフォルトでは、単にvalueプロパティを渡すとinputイベントを受け取るための糖です。したがって、コンポーネントにvalueプロパティを追加し、inputイベントを発生させるだけです。これはdescribed in the documentationとしてカスタマイズすることもできます。

<service-details v-model="selected_service_shortname"></service-details> 

：このような親で使用

console.clear() 
 

 
var service_details = { 
 
    props: ["value"], 
 
    template: ` 
 
      <input type="text" v-model="internalValue"> 
 
     `, 
 
    computed: { 
 
    internalValue: { 
 
     get() { 
 
     return this.value 
 
     }, 
 
     set(v) { 
 
     this.$emit("input", v) 
 
     } 
 
    } 
 
    } 
 
}; 
 

 
new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    selected_service_shortname: "some service name" 
 
    }, 
 
    components: { 
 
    'service-details': service_details 
 
    }, 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script> 
 

 
<div id="app"> 
 
    <service-details v-model="selected_service_shortname"></service-details> 
 
    <hr> 
 
    Selected Service Shortname: {{selected_service_shortname}} 
 
</div>