我用JS修改了input框里面的值,在页面上显示是修改成功了,但是数据提交或者是把焦点放到input框里面以后,值又变成原来的值了
1.页面应该是用的vue.js来写的
2.我想知道怎样才能把数据彻底修改掉或者是找到存数据的地方
3.往input框里面填了数据,页面上有数据展示,但是html里面不存在
具体要看你的代码,你怎么修改的,如果是双向绑定,你应该修改model的值。而不是input value,比如
this.$set(this.对象,'属性','值')
元素没有使用v-model进行绑定吗,例如
<input v-model="对象名.属性名"/>
你所说的变回原来的值是不是placeholder占位符?还有
3.往input框里面填了数据,页面上有数据展示,但是html里面不存在
这个是用户输入的value值,你可以在html里面设变量接收
你的描述是得到焦点后又将你赋的值给覆盖了,说明焦点事件实在你的js事件之后,那么你可以找到他的焦点事件直接改,或者都放到他的事件之后
这种情况一般是受控组件和非受控组件混用所导致的。在Vue.js中,通常使用v-model指令来实现双向数据绑定,从而使组件成为受控组件。如果你使用JavaScript直接修改input框里面的值,则相当于绕过了Vue.js的数据流机制,这会导致数据不会被更新到Vue.js的状态中,并且可能会覆盖Vue.js已经更新的状态。
要解决这个问题,你可以考虑使用Vue.js提供的数据绑定方式来修改input框的值,而不是直接操作DOM元素。例如,你可以将input框的值绑定到Vue.js的data中,然后通过修改data来实现更新。具体做法如下:
<input type="text" v-model="message">
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
methods: {
updateMessage() {
this.message = 'New message!'
}
}
这样,在调用updateMessage方法时,input框的值就会被更新为'New message!'。
另外,关于你提到的第三个问题,如果你填充的数据只是在页面上展示,但在HTML中不存在,那么可能是通过JavaScript动态创建的元素。这种情况下,你需要查找对应的JavaScript代码来确认数据是如何被填充到页面中的。