将 v-model 与数组一起使用时，从 vue.js 获取无法读取未定义错误的属性

Question

I'm trying to v-model to an array item's property. When I load the page I see "[Vue warn]: Error in render function: 'TypeError: Cannot read property 'viewFood' of undefined' in the console and a blank page.

this is with vue.js 2.x.

https://codepen.io/jzaun/pen/YxYyJN/

html

<div id="ai-config">
  <div class="info">
    <div class="row">
      <h1>Resource Points</h1>
    </div>
    <div class="row">
      <label>Total:</label>
      <div class="value">
        {{maxResourcePoints}}
      </div>
    </div>
    <div class="row">
      <label>Remaining:</label>
      <div class="value">
        {{maxResourcePoints - usedResourcePoints}}
      </div>
    </div>
  </div>
  <div>
    <table>
      <tr>
        <td></td>
        <td v-for="(option, idx) in options">
          {{option.title}}
        </td>
      </tr>
      <tr v-for="n in directions">
        <td>Direction {{n}}</td>
        <td v-for="option in options">
          <input type="checkbox", v-model="selected[n][option.key]" />
        </td>
      </tr>
    </table>
  </div>
</div>

javascript

new Vue ({
  el: '#ai-config',

  data: {
    maxResourcePoints: 10,
    usedResourcePoints: 0,
    selected: [],

    directions: 8,
    options: [{
      title: 'Food',
      key: 'viewFood',
      cost: 1
    }, {
      title: 'Water',
      key: 'viewWater',
      cost: 1
    }, {
      title: 'Own',
      key: 'viewOwn',
      cost: 1
    }, {
      title: 'Other',
      key: 'viewOther',
      cost: 1
    }]
  },

  methods: {
  },

  created: function () {
    this.selected = [];
    for(i=0; i< 8; i++) {
      this.selected.push({});
    }
  }
});

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

Answer 2

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

Answer 3

<tr v-for="n in directions">方向应该是数组而不是数字

Answer 4

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.