Vuejs Dynamic input binding & computed is not a function

Question

I need help in dynamically setting the input v-model. Based on the dropdown selection. I will get data from the backend. Right now, it's a dummy data.

ScreenShot

example, there will be 3 input boxes in each row. numerator, denominator and the computed value. For each input box, I have passed v-model like this form['num_' + idx], form['den_' + idx], form['comp_' + idx]. I have created a form object in data(state).

if I bind the computed value input box (:value) with computed property, then I am not able to pass arguments. I need the current numerator, denominator value. it gives me an error computedValue is not a function.

Right now, I have tried putting this computedValue function in the methods section and also added a button next to the computed each input box. What I really need is, when the value in the numerator and denominator changes. it automatically calculates the value and show it in the third computed input box.

The value in the computed input box is not showing. Sometimes it shows value if I change row data in other rows.

<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>

Please guide me.

Cheers Meet

Steven Spungin · Accepted Answer · 2019-10-08 16:21:07Z

1

You need to use Vue.set instead of index [] for object updates to be reactive.

Instead of:

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

Try:

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

answered Oct 8, 2019 at 16:21

Steven Spungin

29.5k7 gold badges97 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Meet Over a year ago

How can I use computed function instead of normal method? I need to pass agrs?

Steven Spungin Over a year ago

One option is: instead of using parameters, create a data member for your them instead, and simply set them; The computed function will reference them and recompute automatically.

tony19 · Accepted Answer · 2022-07-16 05:01:12Z

0

You need to use reactive properties in order for your vm to be notified of updates to a property and updated reactively.

form['num_' + idx], form['den_' + idx], and form['comp_' + idx] aren't reactive because you haven't declared them on the object you've returned from the data() method in the script block.

You need to use Vue.set/Vue.prototype.$set AKA this.$set to dynamically set reactive properties like so:

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

see Reactivity in Depth - Vue.js

edited Jul 16, 2022 at 5:01

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 8, 2019 at 16:24

gabriel.hayes

2,31312 silver badges15 bronze badges

1 Comment

Meet Over a year ago

How can I use computed function instead of normal method? I need to pass agrs?

Collectives™ on Stack Overflow

Vuejs Dynamic input binding & computed is not a function

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related