Vue.js 不会更新它的编辑位置答案

【问题标题】：Vue.js won't update it's place to editVue.js 不会更新它的编辑位置
【发布时间】：2017-06-14 07:22:51
【问题描述】：

我的新副项目遇到了麻烦。看到 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: '...'
    }
});

如果我将输入放在它应该更新的位置下方，它将不起作用，但如果输入首先出现，那么它就像一个魅力。

我应该如何继续？

【问题讨论】：

让它工作了，但只有当我失去对这个输入的关注时它才会更新......整个东西都需要在 create_post div 中，而不仅仅是我想显示输入的地方。

标签： laravel vue.js blade

【解决方案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

【讨论】：

【解决方案2】：

我在我发布的评论中说过，v-model 必须没有 .lazy 结尾以使其实时更新。

所以整个内容必须在 div #app 中，并且模型必须像 v-model="header"，而不是 v-model="header.lazy"

【讨论】：