Go to Qiita Advent Calendar 2024 Top
LoginSignup
odolodol
@odolodol (踊)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

vueでv-modelに連想配列の中の任意indexの値を指定したい

Q&A

Closed

初心者LaravelVue.js

解決したいこと

vueでv-modelに連想配列の中の任意indexの値を指定したい

コードによる実例

例えば、下記の配列の中身が

<div  v-for= "data　in datas">
    {{data}}
</div>

の中身が

{ "data1": "1000", "data2": "1000", "data3": [ { "data4": [ null ], "data5": [ null ] } ] }

だったときにdata4の値をv-modelに指定したいです。

試したこと

わかりやすいようにv-textで行うと


<div  v-for= "data　in datas">
    <ul v-text="data.data3"></ul>
</div>

で、下記のように表示されることは確認できましたが
ここから、どのようにdata4の値だけを指定してよいかわかりません。
ご回答お願いいたします。


[ { "data4": [ null ], "data5": [ null ] } ]

失敗例


<!-- 例1：結果は何も表示されない-->

<div  v-for= "data　in datas">
    <ul v-text="data.data3.data4"></ul>
</div>

<!-- 例2：結果は何も表示されない-->

<div  v-for= "data　in datas">
    <ul v-text="data.data3[data4]"></ul>
</div>

環境

npm list vueの結果

├─┬ bootstrap-vue@2.21.2
│ └─┬ portal-vue@2.1.7
│   └── vue@2.6.14 deduped
└── vue@2.6.14

あとは、windows10とlaravelです。
※あまり関係ないと思うのでザックリ書いてます。もし、重要でしたら追記いたします。

0

1Answer

woxtu
@woxtu

配列の要素にアクセスしたいときは array[index] のように書きます。

0Like

Comments

  1. @odolodol

    Questioner



    ご回答ありがとうございます。

    ---

    <div v-for= "data　in datas">
    <ul v-text="data.data3[0]"></ul>
    </div>

    ---

    で、試みたところ

    ---

    { "data4": [ null ], "data5": [ null ] }

    ---

    が表示されます。

    理想は

    ---

    "data4": [ null ]

    ---

    なのですが。。。

  2. @odolodol

    Questioner

    ちなみに、

    ---

    <div v-for= "data　in datas">
    <ul v-text="data.data3[0][data4]"></ul>
    </div>

    ---

    は何も表示されませんでした。


    引き続きご回答いただけますと幸いです。
    よろしくお願いいたします。

  3. @odolodol

    Questioner

    下記コードで自己解決いたしました。ありがとうございます。

    ---

    <div v-for= "(item,index) in items" >
    <div v-if="index == 'item_id1'">
    <div v-for= "(item_3,index) in item.item3">
    <ul v-text="item_3.item4"></ul>
    </div>
    </div>
    </div>

    ---

Your answer might help someone💌

LoginSign Up