v-forを使用した実装で困っております。

Question

お世話になります。
掲示板アプリにタグ付け機能を実装中v-forを使用した実装がうまくいかないのでご質問させて頂きます。

タグ付け機能はほぼできているのですが、表示が配列のまま表示されており、これを解決すべくv-forを使用して実装しております。

しかし、現状以下の様に配列がそのまま挿入される形となっており、以下の例でしたら「css」と「vue」を分けて綺麗に表示したいと思っております。

よければアドバイス頂けないでしょうか？

Message.vue

MessageList.vue

宜しくお願い致します。

Answer 1

ご質問拝見いたしました。

確認させていただいたところMessage.vueのpropsのtagがArrayとなっており、
そのtagを {{ tag }}でそのまま表示しているため、ご質問のような表示となっていました。

v-chip自体をv-forでループさせ表示することで解消出来ると思います。
以下例となります。
Message.vue

    <v-chip
      v-for="(tagItem, index) in tag" :key="index" // v-forでtagItemに代入
      color="#17204d"
      text-color="yellow"
    >
      <v-icon left>mdi-label</v-icon>
      {{ tagItem }} // tagItemで表示
    </v-chip>

ご参考になれば幸いです。

Comments

[riki01]

Twoshiさん
ご回答ありがとうございます！
実装したところしたかった挙動になりました！
本当に助かりました！ありがとうございました！

[Twoshi]

少しでもお力になったのであれば幸いです^^