VueJS无法更新组件
我有这个 Vue 1 组件，它获取一个对象作为必须由用户填充的道具。
该对象具有以下结构：
{
property1: ...,
property2: ...,
inputs: {
2130: { value: ..., comment: ... },
2131: { ... },
...,
}
}
该组件是一个简单的模式，带有一个包含所有必要输入的表格。我想检查一些内容，进行计算并根据用户输入更改单元格样式。
当模态加载时，我构建页面，使用它们的 id 设置这些输入的模型：
v-model="object.inputs[subgroup[1].dx.mob.id].comment"
（注意：subgroup[1]是包含表结构“定义”的另一个对象的一部分，通过执行 inputs[subgroup[1].dx.mob.id] 我期望链接表字段到对象对应的输入）
问题是，无论我尝试什么，页面都不会重新呈现。 <input> 字段甚至不保存该值，一旦我单击它就会消失。
更奇怪的是，这些值实际上已设置，但使该组件重新渲染并执行我需要他做的所有良好检查和样式的唯一方法是通过关闭并重新打开模式或通过在表的父表上设置 v-if。
这些显然都是不可行的选择
- 我需要页面具有响应性
- 重新创建组件（在每次输入更改时）需要太多时间
这是我尝试过的事情：
- 为每个输入动态构建一个观察器
- 但是
vm.$watch由于某种原因找不到对象。
- 但是
...forEach((input, index)=>{
vm.$watch(`object.inputs[${index}].comment`, function(){
this.$forceUpdate();
})
}
返回计算属性中的输入并观察
- 但页面无法检测到更改
在 @change 和 @input 事件上手动启动
this.$forceUpdate()- 但是
$forceUpdate不是一个函数
- 但是
在 data 中声明一个计数器，并在 @change 和 @input 事件上递增它。
- 但页面仍然没有更新。
将
v-if放在不可见的对象上- 但只有所述对象被重新渲染
使用 data 属性更改组件的 :key 属性
- 但什么也没发生
正如预期的那样，我能做到这一点的唯一方法是销毁并重新创建组件。
谁有解决办法吗？
丑陋的解决方案：经过几次失败的尝试后，我发现了一些可以解决问题的方法，即使是以不正确的方式。任何真实的 答案仍然非常受欢迎。
本质上，我设法强制组件重新渲染：
- 在数据中声明一个新变量，我将其命名为
key（在我的例子中它是数字，但任何都可以）- 创建一个
update函数，将key从 1 切换到 0，反之亦然。- 将该函数绑定到每个输入或选择的
@blur事件- 由于我的整个模态是根据计算属性呈现的，因此我在该函数内的
key上执行了一些读取操作（在 我的情况是我将其值分配给一个新变量，然后记录它（不是 确定两者中的哪一个触发渲染，但我猜第一个是 够了））... data: function() { return { ... , key: 0 }; }, ... methods: { ... , update: function(){ this.key = this.key == 0 ? 1 : 0 } }, computed: { ... , testData: function () { //this functions builds an object that is used to render the page var data = [] var __self = this var blu = this.key // This is the line where i read key console.log(blu) this.test.inputs.forEach(function(input){ var slug = input.slug.replaceAll('#', '').split('-') __self.setItem(data, slug, input) }) console.log('data', data) return data // this value gets then passed to Object.entries() to get an iterable object I build the page with } }
