Home>

I want to display the list contents with multiple attributes and check the flags in vue.js.
I want to specify the display condition with v-if, but I am getting an undefined error on the console.

I searched and tried various things on the net and text, but the problem is not solved.
Would you please teach me?

[Vue warn]: Error in render: "TypeError: Cannot read property'AnswerFlag' of undefined"

Corresponding source code
<template>
<input type = "radio" v-bind: value = "c1" v-model = "Answer1">
<label>{{q1 [c1] .text}}</label><br>
<input type = "radio" v-bind: value = "c2" v-model = "Answer1">
<label>{{q1 [c2] .text}}</label><br>
<input type = "radio" v-bind: value = "c3" v-model = "Answer1">
<label>{{q1 [c3] .text}}</label><br>
<input type = "radio" v-bind: value = "c4" v-model = "Answer1">
<label>{{q1 [c4] .text}}</label><br>
   
</template>
<script>
export default {
  data: function () {
    return {
      c1: 0,
      c2: 1,
      c3: 2,
      c4: 3,
      Answer1:'',
      q1: [
        {id: 1, text:'Choice 1', AnswerFlag: 0},
        {id: 2, text:'Choice 2', AnswerFlag: 0},
        {id: 3, text:'Choice 3', AnswerFlag: 1},
        {id: 4, text:'Choice 4', AnswerFlag: 0}
      ]
    }
  }
}
</script>
What I tried

Spell check AnswerFlag, copy and paste from list again

Survey on the site such as the following
http://nayucolony.hatenablog.com/entry/2017/05/30/192447
https://jp.vuejs.org/v2/guide/list.html
https://jp.vuejs.org/v2/guide/components-props.html

Rename AnswerFlag to something else (ans, answerFlag, answerflag, etc.)

I tried, but unfortunately it didn't work.
There were no undefined errors in q1 [Answer1] .id or q1 [Answer1] .text

Supplementary information (FW/tool version, etc.)

If anyone has any idea, please teach me.

  • Answer # 1

    Excuse me for misunderstanding m (__) m

    I don't know what to expect

    <input type = "radio" v-bind: value = "c1" v-model = "Answer1">

    In this way, Answer1 contains the string "c1" which is v-bind: value, right?
    It probably matches because 0 of c1 of data of vue is entered. The following is wrong

    In other words

    </template>


    In

    q1 [Answer1] .AnswerFlag


    Is

    q1 ["c1"]. AnswerFlag


    I think it will be like this.

    q1.c1.AnswerFlag


    Isn't it undefined because there is no such attribute?

    Do I have to access it with the subscript of the array of q1?

    <input type = "radio" v-bind: value = "0" v-model.number = "Answer1">


    Like this?