vue.js v-modelキーワードでテキストボックスが消えます

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）これは動作しない。これは、動作しない

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

3）、テキストボックスdisappeares（添加Vモデルのキーワード）、テキストボックス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