[Vuejs]-Getting a cannot read property of undefined error from vue.js when using v-model with an array

by

1👍

✅

There are two primary issues.

First, Vue cannot detect when you add a property dynamically to an object that has been added to the Vue’s data. When you do this:

v-model="selected[n][option.key]"

You are adding a property to the empty object you initialized in the create handler. To fix that, just initialize with actual properties (or use $set, which doesn’t appear to be an option here).

this.selected.push({viewFood: false, viewOwn: false, viewWater: false, viewOther: false});

Second (and the cause of the error you quote in your question), when you use a range v-for the values start at 1. So

v-model="selected[n][option.key]"

has an off by one error because as you likely know, Javascript arrays are zero based. It should be

v-model="selected[n - 1][option.key]"

There was also a minor HTML error in the original pen

<input type="checkbox", v-model="selected[n][option.key]" />

where the comma should be removed.

Here is your pen updated.

👤Bert

-1👍

I think that I have the code you need.
Check it out here https://codepen.io/spaquet/pen/MvrbLQ

I made the following change:

  1. Adding value and id to all checkboxes and making sure that they are all different so you can identify which one is clicked.
  2. Removed your created function. Useless as selected is defined in data (my opinion is that you may want to keep the state between relead…)
  3. Added a click function to all the checkboxes. It is used to visualize the state of the selected at every iteration.

You can now have in selected the list of the elements that are selected with the following format direction-option.key (1-viewFood, etc.)

👤Stephane Paquet

-2👍


<tr v-for="n in directions">

directions should be Array not Nummber

👤Giap Nguyen

-2👍

You initialize selected to contain a bunch of {} objects. selected[n] will be an empty object, so naturally selected[n][option.key] is null.

Changing <input type="checkbox", v-model="selected[n][option.key]" /> to <input type="checkbox" v-model="option.key"> works to me – it renders. All the checkboxes in a column point to the same value though – this is probably not what you want. This is because they all reference the same v-model

Can you explain a little more about what this is supposed to do? I can help you fix it then. Vue is great framework once you understand how it works. Maybe a mockup of what this should do or a little more explanation. Thanks.

👤lmiller1990

Leave a comment