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

Question

我在动态设置输入 v-model 方面需要帮助。基于下拉选择。我将从后端获取数据。现在，它是一个虚拟数据。

ScreenShot

例如，每行将有 3 个输入框。分子、分母和计算值。对于每个输入框，我都传递了 v-model 这样的 form['num_' + idx], form['den_' + idx], form['comp_' + idx]。我在数据（状态）中创建了一个表单对象。

如果我将计算值输入框 (:value) 与计算属性绑定，那么我将无法传递参数。我需要当前的分子、分母值。它给了我一个错误 computedValue is not a function。

现在，我已经尝试将这个 computedValue 函数放在方法部分，并且还在计算的每个输入框旁边添加了一个按钮。我真正需要的是，当分子和分母中的值发生变化时。它会自动计算该值并将其显示在第三个计算输入框中。

计算输入框中的值未显示。有时，如果我更改其他行中的行数据，它会显示价值。

<template>
  <div>
    <select v-model="service">
      <option disabled value="">Please select one</option>
      <option>Order to cash</option>
    </select>
    <select @change="changeAccountEvent($event)" >
      <option disabled value="">Please select one</option>
      <option>Nissan</option>
      <option>Ford</option>
    </select>

    <div>
      <ul>
        <li v-for="(d,idx) in data" :key="d.metric">
          <div class="flex px-4 py-2">
            <div class="w-1/4">{{d.metric}}</div>
            <div class="w-1/4 mr-2">
              <input v-model="form['num_' + idx]" type="number">
            </div>
            <div class="w-1/4 mr-2">
              <input v-model="form['den_' + idx]" type="number">
            </div>
            <input v-model="form['comp_' + idx]" type="number" >
            <button
              @click="computedValue(form['num_' + idx], form['den_' + idx], idx, d.formula)">get value
            </button>
            <!-- :value="computedValue(form['num_' + idx], form['den_' + idx]) -->
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      service: '',
      account: '',
      data: null,
      form: {

      },
    };
  },
  methods: {
    computedValue(a, b, c, d) {
      console.log('a -> ', a, 'b -> ', b, 'c -> ', c, 'd -> ', d);
      this.form[`comp_${c}`] = parseFloat(a) / parseFloat(b);
      console.log(this.form);
    },
    changeAccountEvent(event) {
      if (this.service !== '') {
        this.account = event.target.value;

        if (this.account === 'Ford') {
          const fordData = [
            { metric: 'Days Sales Outstanding', formula: '/' },
            { metric: 'Past due percent', formula: '/' },
            { metric: 'Days', formula: '/' },
            { metric: 'percent', formula: '/' },
          ];

          this.data = fordData;
        }

        if (this.account === 'Nissan') {
          const nisData = [
            { metric: 'Days Sales Outstanding', formula: '/' },
            { metric: 'Past due percent', formula: '/' },
          ];
          this.data = nisData;
        }
      } else {
        // event.target.value = '';
        alert('please select service line');
      }
    },
  },
};
</script>

请指导我。

干杯 见面

Answer 1

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

代替：

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

试试：

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

Answer 2

您需要使用响应式属性，以便您的虚拟机在属性更新时收到通知并进行响应式更新。

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)

见Reactivity in Depth - Vue.js