Vuejs 动态输入绑定和计算不是函数

Question

我需要帮助动态设置输入 v-model。基于下拉选择。我将从后端获取数据。现在，这是一个虚拟数据。例如，每行将有 3 个输入框。分子、分母和计算值。对于每个输入框，我都传递了这样的 v-model：form['num_' + idx], form['den_' + idx], form['comp_' + idx]。我在 data(state) 中创建了一个表单对象。如果我将计算值输入框 (:value) 与计算属性绑定，那么我将无法传递参数。我需要当前的分子、分母值。它给了我一个错误计算值不是函数。现在，我尝试将这个计算值函数放在方法部分，并在计算的每个输入框旁边添加了一个按钮。我真正需要的是，当分子和分母中的值发生变化时。它会自动计算该值并将其显示在第三个计算输入框中。计算出的输入框中的值未显示。如果我更改其他行中的行数据，有时它会显示值。

Answer 1

您需要使用Vue.set而不是索引[]来使对象更新成为反应式。

代替：

this.form[`comp_${c}`] = parseFloat(a) / parseFloat(b);

尝试：

Vue.set(this.form, `comp_${c}`, parseFloat(a) / parseFloat(b));

Answer 2

您需要使用反应式属性，以便您的 vm 收到属性更新的通知并进行反应式更新。

form['num_' + idx]、form['den_' + idx] 和 form['comp_' + idx] 不是响应式的，因为您没有在从 data() 返回的对象上声明它们脚本块中的方法。

您需要使用 Vue.set/Vue.prototype.$set AKA this.$set 来动态设置响应式属性，如下所示：

this.$set(this.form, 'num_' + idx, value)

深入了解反应性 - Vue.js