Vuejs v-model未更新

Question

每当我更新文本字段中的值时，我的"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/

Answer 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> 

​

属性前的冒号用于在最初未计划的属性上绑定数据，例如"placeholder“或"value”。但是v-model属性已经计划从你的Vue应用程序中获取数据，并且不需要这样做。

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

Answer 2

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