How to bind to array objects in vue?

Question

I have a data array that I want to bind input element entry (integers) into data fields, and then total them. This is akin to a spreadsheet where it can compute the sum or difference of different values specified in the same column.

I don't understand from vue.js documentation, what it takes to make two-way data binding work on these array objects. I can't tell if the values are updating in the array. Either they aren't updating the array, or the summation link is not being updated. Do you have a recommendation for determining if the data binding is broken, or why the expression is not getting updated?

<tr v-for="(row, powerIndex) in powers">
    <td :class="powerlabelclass(row)">{{ row.name }}</td>
    <td class="power-item" v-for="turn in turns">
        <div v-if="row.expression">
            <input :class="poweritemclass(row)" type="number" :tabindex="tabindex(powerIndex, turn)" :value="calculatepower(powerIndex, turn)" />       
        </div>
        <div v-else>
            <input :class="poweritemclass(row)" type="number" :tabindex="tabindex(powerIndex, turn)" :value="row.turns[turn]" />        
        </div>
    </td>
</tr>

Here is the js fiddle: https://jsfiddle.net/ledlogic/fst561by/

Maybe you want to include the code blocks in question and only link the jsfiddle as a backup? Reading the code from the fiddle is a PITA — Potato Salad
– Potato Salad, Commented Dec 11, 2018 at 6:06

ittus · Accepted Answer · 2018-12-11 06:12:18Z

2

You need to use v-model instead of :value for 2 way binding

I assume you want to calculate total value automatically. You only need to change:

  <div v-else>
     <input :class="poweritemclass(row)" type="number" :tabindex="tabindex(powerIndex, turn)" v-model="row.turns[turn]" />        
  </div>

Demo https://jsfiddle.net/ittus/1z6qu43y/

answered Dec 11, 2018 at 6:12

ittus

22.5k5 gold badges62 silver badges59 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-16 01:14:01Z

Fisrt of all - you are missing v-model which is necessary for two way binding.

I suggest you try and understand the concept of v-model first:

You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements.

Please note that:

-

v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance
data as the source of truth. You should declare the initial value on
the JavaScript side, inside the data option of your component.

For languages that require an IME (Chinese, Japanese, Korean etc.), you’ll notice that v-model doesn’t get updated during IME composition. If you want to cater for these updates as well, use input event instead.

Now for your example:

What it should look like is:

<tr v-for="(row, powerIndex) in powers">
    <td :class="powerlabelclass(row)">{{ row.name }}</td>
    <td class="power-item" v-for="turn in turns">
        <div v-if="row.expression">
            <input :class="poweritemclass(row)" type="number" :tabindex="tabindex(powerIndex, turn)" v-model="calculatepower(powerIndex, turn)" />       
        </div>
        <div v-else>
            <input :class="poweritemclass(row)" type="number" :tabindex="tabindex(powerIndex, turn)" v-model="row.turns[turn]" />        
        </div>
    </td>
</tr>

I'd suggest you to look at this post for better context.

Collectives™ on Stack Overflow

How to bind to array objects in vue?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related