Vuejs v-model 没有更新答案

【问题标题】：Vuejs v-model not updatingVuejs v-model 没有更新
【发布时间】：2020-05-13 12:55:21
【问题描述】：

每当我更新文本字段中的值时，我的“hello”数据属性都不会更新。当我修改文本字段中的值时，{{hello}} 中的值应该会发生变化。这是一个演示我正在尝试做的视频：https://www.youtube.com/watch?v=9rmfaA-ndak

<div id="app">
  <example></example>
</div>

<template id="template">
  <input type="text" placeholder="target env" id="field_target_env" :v-model="hello">{{ hello }}
</template>

Vue.component('example', {
  template: '#template',
  data() {
    return {
        hello: '242'
    }
  }
});

var vm = new Vue({
  el: '#app'
});

这里是可运行的 jsfiddle：https://jsfiddle.net/3akv5e4f/4/

【问题讨论】：

标签： vue.js

【解决方案1】：

您应该删除输入的 v-model 属性的冒号，它应该看起来像：

var vm = new Vue({
  el: '#app',
  data() {
    return {
      hello: 'Hello World!'
    };
  }
});

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

<div id="app">
  <h1>{{ hello }}</h1>
  <input id="field_target_env" type="text" placeholder="target env" v-model="hello" />
</div>

属性前的冒号用于绑定最初未计划的属性上的数据，例如“占位符”或“值”。但是 v-model 属性已经计划从您的 Vue 应用程序中获取数据，并且不需要。

在我的示例中，我删除了您的组件部分以专注于您的主要问题，即关于 v-model

【讨论】：

【解决方案2】：

尝试在代码中删除 v-model 之前的冒号。只有在你做速记表达式时才需要它。

【讨论】：

啊，是的...谢谢。该睡觉了。