通过js修改了input的value值，但是鼠标焦点放在里面后值又变回原来的值了

Question

我用JS修改了input框里面的值，在页面上显示是修改成功了，但是数据提交或者是把焦点放到input框里面以后，值又变成原来的值了

1.页面应该是用的vue.js来写的

2.我想知道怎样才能把数据彻底修改掉或者是找到存数据的地方

3.往input框里面填了数据，页面上有数据展示，但是html里面不存在

Answer 1

具体要看你的代码，你怎么修改的，如果是双向绑定，你应该修改model的值。而不是input value，比如
this.$set(this.对象,'属性','值')

Answer 2

元素没有使用v-model进行绑定吗，例如

 <input  v-model="对象名.属性名"/>  

Answer 3

你所说的变回原来的值是不是placeholder占位符？还有
3.往input框里面填了数据，页面上有数据展示，但是html里面不存在
这个是用户输入的value值，你可以在html里面设变量接收

Answer 4

你的描述是得到焦点后又将你赋的值给覆盖了，说明焦点事件实在你的js事件之后，那么你可以找到他的焦点事件直接改，或者都放到他的事件之后

Answer 5

这种情况一般是受控组件和非受控组件混用所导致的。在Vue.js中，通常使用v-model指令来实现双向数据绑定，从而使组件成为受控组件。如果你使用JavaScript直接修改input框里面的值，则相当于绕过了Vue.js的数据流机制，这会导致数据不会被更新到Vue.js的状态中，并且可能会覆盖Vue.js已经更新的状态。

要解决这个问题，你可以考虑使用Vue.js提供的数据绑定方式来修改input框的值，而不是直接操作DOM元素。例如，你可以将input框的值绑定到Vue.js的data中，然后通过修改data来实现更新。具体做法如下：

1. 将input框的值绑定到Vue.js的data中，例如：

<input type="text" v-model="message">

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

1. 在Vue.js的方法中修改data，例如：

methods: {
  updateMessage() {
    this.message = 'New message!'
  }
}

这样，在调用updateMessage方法时，input框的值就会被更新为'New message!'。

另外，关于你提到的第三个问题，如果你填充的数据只是在页面上展示，但在HTML中不存在，那么可能是通过JavaScript动态创建的元素。这种情况下，你需要查找对应的JavaScript代码来确认数据是如何被填充到页面中的。