Question

我有一个输入，该输入被投标给属性消息。我有一个set按钮，可用于以编程方式更改输入值。按下按钮后，输入值正确更改为'xxxx'。当我在那之后按下清洁按钮时，输入将被正确清洁，但是当我再次按下set和再次清洁时，输入将不再被清除。

工作示例在这里：

<div class="container">
  <div id='root' class="box">
    <input ref="templateFilter" type='text' id='input' v-model='message'>
    {{ message }}
    <button @click="set">set</button>
    <button @click="clean">clean</button>
  </div>
</div>

new Vue({
  el: '#root',
  data: {
    message: 'Hello Vue'
  },
  methods: {
    set: function () {
       let element = this.$refs.templateFilter
       Vue.set(element, 'value', 'xxxx')
  }, clean: function () {
      this.message = ""
  }
}})

问题：

1）是否可以通过编程方式更改输入而无需使用bidden属性值？类似于直接DOM操作：

let element = document.getElementsByClassName("templateFilter")[0]
element.value = 'xxxxx'

但是可以正确刷新组件吗？

2）为什么{{ message }}调用set方法后没有刷新？

Answer 1

为什么调用设置方法后message不能刷新？

当您在输入中键入内容时，message数据会通过事件处理程序BUT进行更新（以编程方式进行设置），因此不会触发事件处理程序，这就是message未被更新/刷新的原因。 ...

解决方案：

解决您问题的一个简短方法是仅更改message值this.message = "xxxx"，但是如果您坚持以编程方式进行设置，则必须触发输入事件：

set: function() {
  let element = this.$refs.templateFilter
  Vue.set(element, 'value', 'xxxx')
  element.dispatchEvent(new Event('input'))
}

这是一个演示：codepen

以编程方式输入的设置值不会刷新组件DOM

1 个答案: