Vue v-model绑定异常求助：输入框数据闪显后消失

这种情况我之前在Laravel+Vue的项目里也碰到过，大概率是Vue重复引入或者Laravel Blade与Vue的初始化时机/语法冲突导致的，咱们一步步排查解决：

1. 先解决Vue重复引入的问题 #

你提到既通过npm安装了Vue，又在页面头部加了CDN链接，这会导致两个不同的Vue实例同时存在，很容易出现数据绑定后被覆盖的情况：

• 直接移除页面里的Vue CDN链接；
• 检查你的resources/js/app.js文件，确保已经正确引入Vue：

  // Vue 2的写法
  import Vue from 'vue'
  window.Vue = Vue
  
  // Vue 3的写法（如果是装的Vue3）
  import { createApp } from 'vue'
  window.createApp = createApp
  

• 然后重新编译前端资源：在项目根目录执行npm run dev或者npm run prod（生产环境）；
• 页面里只保留Laravel编译后的app.js引入：

  <script src="{{ asset('js/app.js') }}"></script>
  

2. 调整Vue实例的初始化时机 #

确保你的Vue实例是在页面DOM加载完成后再初始化，避免因为DOM还没渲染完成导致绑定失效：

• 把你的Vue代码放到DOMContentLoaded事件里，或者直接写到app.js的末尾：

  // 如果是Vue 2，放到app.js里
  document.addEventListener('DOMContentLoaded', function() {
    var edit = new Vue({
      el: '#postEdit',
      data: {
        post: {
          body: 'this is body'
        }
      },
    });
  })
  

3. 排查Blade模板语法冲突 #

Laravel Blade的{{ }}和Vue的插值语法默认是一样的，虽然你用的是v-model，但如果页面里有其他Vue插值内容，会被Blade先解析，间接影响数据绑定。可以修改Vue的分隔符来避免冲突：

// Vue 2的写法，放到Vue实例创建前
Vue.config.delimiters = ['[[', ']]'];

// 之后如果用插值的话就写[[ post.body ]]，和Blade的{{ }}区分开

4. 检查是否存在表单自动提交的情况 #

如果你的<input>是在<form>标签内，有没有可能页面加载时触发了表单的默认提交？可以给form加@submit.prevent（Blade语法）或者在JS里阻止默认行为，避免页面重新加载清空数据：

<form @submit.prevent>
  <div id='postEdit'>
    <input type="text" name="title" id="title" class="form-control" v-model="post.body">
  </div>
</form>

按照上面的步骤排查，应该就能解决数据闪显后消失的问题了。另外你控制台看到的Getter & Setter是Vue响应式数据的正常表现，说明Vue已经成功将数据转为响应式了，不用担心这个~

内容的提问来源于stack exchange，提问作者I Love Code