Vue.jsは編集場所を更新しません

Question

私は新しいサイドプロジェクトに悩まされています。 Saw Vue.js、それはクールだと思って試してみました。

私は私の新しいブログ記事を挿入場所です：

<input class="form-control" placeholder="Title" v-model="header" name="title" type="text" value=""> 

そして、それは更新しなければならないところ、これは次のとおりです。

<div id="create_post" class="site-heading"> 
    <h1>New post</h1> 
    <hr class="small"> 
    <span class="subheading"></span> 
</div> 

これは私のjavascriptファイルです：

new Vue({ 
    el: '#create_post', 
    data: { 
     header: 'New post', 
     subheader: '...' 
    } 
}); 

私はそれを更新する必要がある場所の下に入力を入れても動作しませんが、入力が最初に来たら、それは魅力のように動作します。

どうすればいいですか？

Answer 1

これはあなたが必要と帽子です：あなたは間違って何をしている

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    header: 'Post Title' 
 
    } 
 
});

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

 
<div id="app"> 
 
    <input v-model="header" name="title" type="text" value=""> 
 
    <h1>{{ header }}</h1> 
 
</div>

があなたVUE要素がcreate_postと入力された、ということであることは、その要素の外にあるので、Vueのは「できtはv-modelその上に

Answer 2

私は私のコメントで私が投稿したことを言ったとv - モデルはあなたとされているそれはリアルタイムで更新させるために終わった。

ので全部はdivの#appでなければならず、モデルがv-model="header"ようにする必要があり、全部ではなくv-model="header.lazy"