Mustache结果未更新

Question

我只是在玩Vue.js，发现了一个问题，我无法解释为什么会发生。这是我的MWE:

Vue.component('list-entry', {
  'template': '<input type="text" :value="t" @input="fireEvent()" ref="text">',
  'props': ['t', 'idx'],
  'methods': {
    fireEvent() {
      this.$emit('update:t', {
        'value': this.$refs.text.value,
        'idx': this.idx
      })
    }
  }
})
new Vue({
  el: "#app",
  data: () => ({
    texts: [
      'Foo', 'Bar', 'Baz'
    ]
  }),
  methods: {
    update(ev) {
      console.log('Set ' + ev.value + ' at index ' + ev.idx)
      this.texts[ev.idx] = ev.value
      console.log(this.texts)
    }
  }
})

input {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class='container'>
    <list-entry 
      v-for="(t, idx) in texts" 
      :key="t" 
      :t="t" 
      :idx="idx" 
      @update:t="update($event)"
      ></list-entry>
  </div>
  {{ texts }}
</div>

让我解释一下。有一个全局数据属性texts，它包含几个字符串。对于每个字符串，将生成一个自定义组件list-entry。字符串使用v-bind传播到这些组件。

当输入中的文本发生变化时，我想要更新全局数据属性。因此，update:t事件被触发并在主应用程序中侦听。这里的update(ev)函数应该做的事情。

如果您运行它，您将在控制台中看到，相应的消息出现并且数组也被更新。然而，在HTML屏幕上的输出(从{{ texts }}替换)中，值是而不是更新。

现在我很困惑。数据属性是否更新?为什么它在mustache输出中不可见?为什么在控制台中同时正确输出?

Answer 1

您可以使用using v-model on Components

实现所需的行为。

Vue.component('list-entry', {
  'template': `<input type="text" :value="value" @input="$emit('input', $event.target.value)" />`,
  props: ['value'],
})
new Vue({
  el: "#app",
  data: () => ({
    texts: [
      'Foo', 'Bar', 'Baz'
    ]
  }),
})

input {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class='container'>
    <list-entry v-for="(t, idx) in texts" :key="idx" v-model="texts[idx]"></list-entry>
  </div>
  {{ texts }}
</div>