Vue.jsの"TypeError: Cannot read property 'AnswerFlag' of undefined"

前提・実現したいこと

vue.jsで複数属性を持ったリスト内容の表示、フラグチェックを行いたいと思っています
v-ifで表示条件を指定したいと考えていますが、コンソール上でundefinedエラーが出ております。

ネットやテキストでいろいろ調べて試したものの問題が解決されません。
ご教授いただけないでしょうか。

発生している問題・エラーメッセージ

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

該当のソースコード

vue
1<template>
2  <input type="radio" v-bind:value="c1" v-model="Answer1">
3  <label>{{ q1[c1].text }}</label><br>
4  <input type="radio" v-bind:value="c2" v-model="Answer1">
5  <label>{{ q1[c2].text }}</label><br>
6  <input type="radio" v-bind:value="c3" v-model="Answer1">
7  <label>{{ q1[c3].text }}</label><br>
8  <input type="radio" v-bind:value="c4" v-model="Answer1">
9  <label>{{ q1[c4].text }}</label><br>
10  <div v-if="q1[Answer1].AnswerFlag == 1"></div>
11</template>
12
13<script>
14export default {
15  data: function() {
16    return {
17      c1: 0,
18      c2: 1,
19      c3: 2,
20      c4: 3,
21      Answer1: '',
22      q1: [
23        { id: 1, text: '選択肢1', AnswerFlag: 0 }, 
24        { id: 2, text: '選択肢2', AnswerFlag: 0 },
25        { id: 3, text: '選択肢3', AnswerFlag: 1 },
26        { id: 4, text: '選択肢4', AnswerFlag: 0 }
27      ]
28    }
29  }
30}
31</script>

試したこと

AnswerFlagのスペルチェック、再度リストからコピペ

以下などサイトでの調査
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

AnswerFlagを別の名前に変更(ans, answerFlag, answerflagなど)

などを試しましたが、残念ながら解決しませんでした。
q1[Answer1].id や q1[Answer1].text ではundefinedエラーは出ませんでした

補足情報（FW/ツールのバージョンなど）

もしお解りになる方がいらっしゃいましたらご教授願います。

行動規範の内容に同意します

回答1件

ベストアンサー

勘違い失礼しましたm(__)m

期待する動作がわかりませんが

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

~~この書き方ではAnswer1にはv-bind:valueである"c1"という文字列が入りますね？~~
vueのdataのc1の0が入るで多分あっています。以下は間違い

つまり

html
1<div v-id="q1[Answer1].AnswerFlag == 1"></div></template>

の中にある

javascript
1q1[Answer1].AnswerFlag

は

javascript
1q1["c1"].AnswerFlag

こうなると思います。

javascript
1q1.c1.AnswerFlag

という属性はないのでundefinedなのでは？

q1の配列の添え字でアクセスしないといけないのでは？

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

こんな感じ？

投稿2020/06/05 14:38

編集2020/06/06 00:09

sousuke

総合スコア3830

first01vue

2020/06/05 14:55 編集

ご回答ありがとうございます。言葉足らずで申し訳ございません。最終的にはAnswerFlag == 1の時に、「正解」を表示させてたいと考えております。 <input type="radio" v-bind:value="c1" v-model="Answer1"> のc1にはdata()で定義した0が入ることを{{ c1 }}で確認しており、同様に{{ Answer1 }}も0が入ることを確認しております。また <input type="radio" v-bind:value="id" v-model="Answer1"> <label>{{ q1[Answer1-1].text }}</label><br> という記載方法を用いても以下、 <div v-id="q1[Answer1-1].AnswerFlag == 1"></div></template> この式以外は正しく表示されております。ご教授いただいた方法で修正してみましたが、残念ながら問題解決には至りませんでした。

sousuke

2020/06/06 00:07

answer1が初期で文字なのがダメなんですかね？私も少し勘違いしてました。とりあえず書いてある通りにしてみました。 https://jsfiddle.net/0xmjeazn/

sousuke

2020/06/06 00:12

あ、それと質問するときはコードはコードブロックに入れてください。回答者が読みにくいです。誤字だと思いますがv-idってないですよね？ <div v-id="q1[Answer1].AnswerFlag == 1"></div> jsfiddleではv-ifに直してます。

first01vue

2020/06/06 13:33

sousuke様ご教授ならびにアドバイスありがとうございます。コードブロックに入れたかったのですが、何分teratail仕様が初めてでしたので修正いたしました。またご指摘の通り、v-idではなくv-ifでした。大変失礼致しました。私もアドバイス頂いたのと同じ記述方法をローカル上で試しておりましたが、それでも TypeError: Cannot read property 'AnswerFlag' of undefined の状態で困惑しております。 vueで何か設定が足りていないのか、環境が良くないのか・・・ jsfiddleでは動作を確認しており、それをそのままローカル環境でコピペしても尚、上手くいきません。

sousuke

2020/06/06 20:36

コピペで動かないとなるとここに書いてある以外のコードの問題だと思います。最小構成から進めていつそのバグがでるか見るしかないと思います。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <title>Document</title> </head> <body> <div id="app"> <input type="radio" v-bind:value="c1" v-model.number="Answer1" /> <label>{{ q1[c1].text }}</label><br /> <input type="radio" v-bind:value="c2" v-model.number="Answer1" /> <label>{{ q1[c2].text }}</label><br /> <input type="radio" v-bind:value="c3" v-model.number="Answer1" /> <label>{{ q1[c3].text }}</label><br /> <input type="radio" v-bind:value="c4" v-model.number="Answer1" /> <label>{{ q1[c4].text }}</label><br /> <div v-if="q1[Answer1].AnswerFlag == 1">正解！</div> </div> </body> <script> var app = new Vue({ el: '#app', data: { c1: 0, c2: 1, c3: 2, c4: 3, Answer1: 0, q1: [ { id: 1, text: '選択肢1', AnswerFlag: 0 }, { id: 2, text: '選択肢2', AnswerFlag: 0 }, { id: 3, text: '選択肢3', AnswerFlag: 1 }, { id: 4, text: '選択肢4', AnswerFlag: 0 }, ], }, }); </script> </html>

行動規範の内容に同意します