关于v-model后续赋值后input中的值无法修改问题

最新推荐文章于 2024-07-18 09:16:37 发布

P.K.face

最新推荐文章于 2024-07-18 09:16:37 发布

阅读量543

点赞数 10

文章标签：前端

本文链接：https://blog.csdn.net/qq_66211468/article/details/138150600

版权

简介

前情摘要，根据时间查询数据嘛，然后提出来一个新的需求，需要默认查询一小时的数据，我直接的想法是后端接口不改变，前端封装的api也不改，改变传入值的参数。

问题

数据我使用v-model绑定的，参数我的修改方式是this.Objec=*** 很明显出现了这个参数被绑死的现象，input只读

解决方式

this.$set(this.Object,"对象名称",更新的参数)

这个this.$set()/this.delete()

是Vue中的实例方法，用在响应式对象上，修改、更新新的值，并确保新的值也是响应式的，可以通过input框修改。

更多方式参考

http://t.csdnimg.cn/uCuoP

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

P.K.face

关注关注

10
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
关于v-model后续赋值后input中的值无法修改问题

前情摘要，根据时间查询数据嘛，然后提出来一个新的需求，需要默认查询一小时的数据，我直接的想法是后端接口不改变，前端封装的api也不改，改变传入值的参数。
复制链接

扫一扫

vue双向绑定，指令v-model

qq_45700583的博客

10-14

817

文章目录1.v-model指令2.v-model的原理3.在radio(单选框)、checkbox(复选框)、select(选择框)中使用 1.v-model指令 1.v-model指令：Vue中使用v-model指令来实现表单元素和数据的双向绑定。表单控件是很常见的，特别是对于用户信息的提交，需要大量的表单。 2.v-model指令实现：表单元素和数据的双向绑定特点： 1.之前是用Mustache语法将数据在元素中显示，现在是用v-model将数据绑定在属性

keras读取训练好的模型参数并把参数赋值给其它模型详解

09-16

### Keras读取训练好的模型参数并把参数赋值给其他模型详解 #### 一、引言在深度学习领域，特别是在计算机视觉任务中，预训练模型被广泛应用于各种场景中。利用已训练好的模型参数不仅可以加快开发流程，还能提高...

1 条评论您还未登录，请先登录后发表或查看评论

vue循环input，动态绑定v-modul的值

HeWar_的博客

12-30

2622

vue2 input回显不能修改值的bug

最新发布

程小博衍的博客

07-18

199

【代码】vue2 input回显不能修改值的bug。

【已解决】vue动态表单v-model无法编辑

bao

03-29

3079

vue动态表单v-model无法编辑

v-model绑定的值修改不了

07-14

1554

v-model绑定无法修改

el-input 给v-model赋了默认值后不能编辑

bollvzwxxiao的博客

12-22

1527

el-input 给v-model赋了默认值后不能编辑

使用Vue框架，发现输入框＜input＞或者＜el-input＞的内容无法修改，也无法输入。

lingrer的博客

11-09

1465

使用Vue框架，发现输入框<input>或者<el-input>的内容无法修改，也无法输入。forceUpdate用来强制渲染，避免data中对象层次太深，Vue框架不自动渲染的情况。首先，检查绑定方式，应该使用v-model，有时候会误用:value，导致无法修改。

vue+element-ui项目，v-model绑定一个动态生成的值，初始化赋值以后无法进行编辑

weixin_46146087的博客

09-27

1019

做需求的时候，需要动态生成一个值，想实现通的v-model去绑定值，发现直接通过初始化赋值了以后无法进行编辑。原来如果没有在data里面定义过的值是没有render的getter和setter属性的，因此也无法进行编辑。解决方案：使用this.$set(this.数组名，“属性名”，值）进行初始赋值就可以实现赋值+编辑啦。记录一下-今天踩坑 ...

ElemetUI el-input 给v-model赋了默认值后不能编辑

weixin_44356010的博客

02-14

4524

ElemetUI el-input 给v-model赋了默认值后不能编辑 <el-input v-model="this.obj.name"></el-input> // 这是在一个方法中给value赋值，方法是直接触发的 this.obj.name = "99" 问题是，赋值之后原本的input 框中就出现了100，但是不能修改了。原因是：vue不允许在已经创建的实例上添加新的根级响应式属性，但可以通过set添加。所以解决办法就是把上面赋值这句代码修改为： this.$se

详解Vue.js和layui日期控件冲突问题解决办法

10-16

在Vue.js中，v-model用于实时同步DOM元素的值与Vue实例的数据，而layui的日期控件在选择日期后会直接修改DOM元素的值，但Vue.js无法感知这种改变，导致数据不一致。例如，当用户在日期控件选择日期后，在后续输入框...

AngularJS控制器controller给模型数据赋初始值的方法

11-26

在AngularJS中，控制器（Controller）是应用的核心组成部分之一，用于管理视图（View）与模型（Model）之间的数据交互。在本实例中，我们将探讨如何在AngularJS控制器中为模型数据赋予初始值，以便在页面加载时即...

对VUE中的对象添加属性

10-18

在Vue.js中，我们经常需要动态地添加或修改对象的属性，特别是在处理接口返回的数据时。本篇文章将探讨如何在Vue中对对象添加属性，并结合一个具体的案例来演示这一过程。 1. **对象属性的动态添加** 在Vue中，当...

计算器：Calculadora-Treno Eventos

02-25

在实际的代码中，开发者可能会使用模板字符串、箭头函数、解构赋值等ES6及后续版本的新特性，以提高代码的可读性和简洁性。此外，为了适应不同屏幕大小和设备，可能还采用了响应式设计。总的来说，"Calculadora-...

el-input在进行了v-model绑定后无法改变绑定值的错误使用

吉力哥

05-15

9027

本来是个小问题，卡了好久，又耽误了项目计划进程，不得不说，前端我是真的菜（日常吐槽）、问题如下：在从后台接受到数据后通过v-model绑定到input值后，发现无法对于input里的值改变我在想是不是因为forEach(e=>{})中e的问题无法双向绑定，而后数据绑定代码改为：通过添加两个中间量来改变直接通过e来赋值，额，还是不行… 后面经过大量尝试，发现是不能直接定义form:{} 因为之前页面中对象form:{}通过Object.assign()使row拷贝到了form，所以.

vue：input框使用v-model绑定值之后无法修改绑定值

热门推荐

10-07

1万+

日常给自己挖坑：搬来的砖，一个没注意的小细节就自己挖了个大坑上代码： <el-form-item label="联系方式" prop="phone"> <el-input v-model="formLabel.phone"></el-input> </el-form-item> methods: { // 获取新增页面的默认电话号码 getAreaAndBankName() { apiRequest

vue:el-input使用v-model绑定多层嵌套对象后编辑时数据无法修改

qq_41854262的博客

03-09

8734

问题：新增操作时无影响，但到了编辑操作时，虽然输入框有值，但无法对其进行删除或修改（预估是在初始化赋值那步有问题）代码如下： <el-form :model="userInfo" ref="ruleForm" :rules="rules" label-width="160px" size="mini" > <el-form-item label="详细地址" prop="location.placeText"> ..

input框赋值后不能进行编辑

qq_39132795的博客

11-03

981

input框赋值后不能进行编辑

element el-input输入框绑定值无法修改原因

weixin_55798503的博客

09-16

2715

大家多多指教

v-html 中使用v-model

05-31

在 Vue 中，v-model 指令通常用于绑定表单元素的值，以便将用户输入的数据绑定到 Vue 实例中的数据属性上。但是，有时候我们需要在渲染 HTML 内容时，也能够使用 v-model 来实现双向数据绑定。这时候，我们可以使用 v-html 指令与自定义组件结合使用。具体来说，我们可以在自定义组件中使用 v-model 指令，然后在组件内部将 v-model 绑定到一个 props 属性上，这样就可以在使用组件时通过 v-model 双向绑定 HTML 内容了。例如，我们可以创建一个名为 `HtmlEditor` 的自定义组件，并在其中使用 v-model 指令来实现双向绑定 HTML 内容： ``` <template> <div> <div contenteditable="true" @input="updateHtml">{{ value }}</div> </div> </template> <script> export default { props: ['value'], methods: { updateHtml(event) { this.$emit('input', event.target.innerHTML); } } } </script> ``` 在上面的代码中，我们通过 `props: ['value']` 定义了一个名为 `value` 的 props 属性，并在组件模板中使用了 v-model 指令来双向绑定该属性。在组件内部，我们将 contenteditable 属性设置为 true，以便让用户可以编辑 HTML 内容，并通过 @input 事件来更新组件的 value 属性。最后，我们通过 `$emit` 方法将更新后的 HTML 内容发送给父组件。在使用该组件时，我们只需要使用 v-model 指令来绑定 HTML 内容即可： ``` <template> <div> <html-editor v-model="htmlContent"></html-editor> </div> </template> <script> import HtmlEditor from './HtmlEditor.vue'; export default { components: { HtmlEditor }, data() { return { htmlContent: '<p>Hello, world!</p>' } } } </script> ``` 上面的代码中，我们将 `<html-editor>` 组件包含在父组件模板中，并使用 v-model 指令来绑定父组件中的 `htmlContent` 数据属性。这样，在编辑器中输入或修改 HTML 内容时，`htmlContent` 数据属性也会被同步更新。