vue.js文本框隨v模型消失關鍵字

Question

有一天vue.js程序員在這裏。沒有Javascript的經驗。第一次在這個論壇上提問。

修改別人的代碼。每當我添加v-model關鍵字時，控件都將停止顯示。

Javscript

var layoutHeader = Vue.extend({ 
    template: '#layout-header-tpl', 
    props: ['userinfo'] 
}); 

的Html

1. 這個工作，顯示文本框（沒有V型關鍵字）

<template id="layout-header-tpl"> 
 
    <input type="text" class="form-control" placeholder="Search"> 
 
    </template>

2）此不起作用，文本框disappeares（加入V-模型關鍵字）

<template id="layout-header-tpl"> 
 
    <input type="text" class="form-control" placeholder="Search" v-model="something1234"> 
 
</template>

3）此不起作用，文本框disappeares（從模板刪除ID）

<template> 
 
    <input type="text" class="form-control" placeholder="Search" v-model="something1234"> 
 
</template>

4）這個工程，顯示文本框（註釋掉模板）

<!--<template>--> 
 
    <input type="text" class="form-control" placeholder="Search" v-model="something1234"> 
 
<!--</template>-->

任何想法是怎麼回事？

Answer 1

你提到你正試圖重用/修改別人的代碼。我相信你試圖通過使用Vue.extend來做某種「繼承」。

如果是這樣，請注意繼承是不建議。有關詳細信息，請參閱討論主題的鏈接：https://github.com/vuejs/Discussion/issues/354

這個討論是圍繞Vue 1.0版本進行的，但我認爲它仍然與Vue 2.0相關。

正如該頁面所述，如果您在團隊中工作並共享代碼/組件，則可以使用mixins代替。您可以在文檔中找到更多詳細信息：http://vuejs.org/guide/mixins.html