const { data } = await attributeid(row.id) this.form = data if (data.scope && data.scope.includes('.')) { // 判断是否包含分隔符 let [left, right] = data.scope.split('.'); // 分割字符串 this.form.scope1 = left // 输出左边的内容 this.form.scope2 = right // 输出右边的内容 delete data.scope } this.dialogVisible = true <el-input-number v-model="form.scope2" :step="1"></el-input-number> <el-input-number v-model="form.scope1" style="width: 250px;" placeholder="最大值" :step="1"></el-input-number> 在编辑时 数据回显 点击两边的加减只触发了一下 怎么解决 代码展示
时间: 2024-02-27 17:54:48 浏览: 23
根据你提供的代码,我看到你在两个 `<el-input-number>` 组件中都使用了 `v-model` 来绑定 `form.scope1` 和 `form.scope2`。这意味着它们共享相同的数据源。因此,当你点击其中一个组件时,另一个组件也会被更新,导致只触发了一次。
要解决这个问题,你可以使用 `computed` 属性来创建一个包装器,使每个组件都有自己的数据源。例如:
```
<el-input-number v-model="scope2" :step="1"></el-input-number>
<el-input-number v-model="scope1" style="width: 250px;" placeholder="最大值" :step="1"></el-input-number>
```
然后,在你的 `computed` 属性中,创建两个新的属性:
```
computed: {
scope1: {
get() {
return this.form.scope1;
},
set(val) {
this.form.scope1 = val;
}
},
scope2: {
get() {
return this.form.scope2;
},
set(val) {
this.form.scope2 = val;
}
}
}
```
这样,每个组件都有自己的数据源,就不会再出现值同步的问题了。
相关问题
const data = this.$commonUtil.deepClone(this.form)
这段代码的作用是深拷贝一个对象,将 `this.form` 对象的所有属性和属性值复制到一个新的对象 `data` 中,并且 `data` 与 `this.form` 完全独立,修改 `data` 不会影响 `this.form`,反之亦然。这个函数是使用了一个常用的 JavaScript 技巧——递归。递归指的是函数调用自身的技术,当遇到对象或数组等引用类型时,递归调用自身,将其子元素也进行递归复制。这样可以确保深拷贝的所有引用类型都是独立的。
const { data } = await attributeid(row.id) this.form = data if (data.scope && data.scope.includes('.')) { // 判断是否包含分隔符 let [left, right] = data.scope.split('.'); // 分割字符串 this.form.scope1 = left // 输出左边的内容 this.form.scope2 = right // 输出右边的内容 delete data.scope } this.dialogVisible = true <el-input-number v-model="form.scope2" :step="1"></el-input-number> 在编辑时 数据回显 点击两边的加减不动 怎么解决 代码展示
根据你提供的代码,可能的原因是你使用了 `delete data.scope` 语句删除了 `data.scope` 字段,但是 `el-input-number` 组件的 `v-model` 绑定的是 `form.scope2`,所以当你在编辑时点击加减按钮时,实际上是在修改 `form.scope2` 的值,而该值已经不再存在了,导致无法修改。
解决这个问题的方法是,在删除 `data.scope` 前,先将其值赋给 `form.scope2`,例如:
```
const { data } = await attributeid(row.id);
this.form = data;
if (data.scope && data.scope.includes('.')) {
let [left, right] = data.scope.split('.');
this.form.scope1 = left;
this.form.scope2 = right;
// 将 data.scope 的值赋给 form.scope2
this.form.scope2Value = data.scope;
}
this.dialogVisible = true;
```
然后在模板中,将 `v-model` 绑定到 `form.scope2Value` 上,例如:
```
<el-input-number v-model="form.scope2Value" :step="1"></el-input-number>
```
这样,当用户点击加减按钮时,实际上是在修改 `form.scope2Value` 的值,而不是 `form.scope2` 的值。在提交表单时,你可以将 `form.scope1` 和 `form.scope2Value` 拼接成一个完整的字符串,以便后端处理。