Question

我的新项目让我遇到了麻烦。看到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无法识别v-model

Answer 2

我告诉我，在我发布的评论中，v-model 没有.lazy结束，让它实时更新。

所以整件事必须在div #app中，模型必须像v-model="header"，而不是v-model="header.lazy"

Vue.js不会更新它的编辑地点

2 个答案: