質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

426閲覧

vue内で非同期で取得したdataの値に応じてテキスト、クラスを付与したい

aa316316

総合スコア39

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/03/05 12:07

編集2019/03/05 12:08

前提・実現したいこと

現在nuxt内で非同期でdataを取得し、dataの値に応じてテキスト、classの付け替えを行おうと考えています。
現在取得しているdataはintegerで保持しており、例えば取得した値が1なら文言をhoge1、classはtest1を付与するような形を実現しようとしています。

おそらくcomputedでjsを使えばできそうな感じがしていますが、しばらく調べても方法を見つけられなかったため、質問させていただきました。
よろしければアドバイスいただけませんか?

よろしくお願いいたします。

該当のソースコード

vue

1<template> 2 <div> 3 <ul> 4 <li v-for="(data, index) in data" :key="index"> 5 {{data.status}} 6 </li> 7 </ul> 8 </div> 9</template> 10 11<script> 12export default { 13 data() { 14 return { 15 data: [], 16 } 17 }, 18 mounted() { 19 // ここでaxiosで値の取得を行いdataに格納しています。記述は省略します。 20 this.data = response.data // [{status: 1},{status: 2},{status: 3},{status: 4}] 21 } 22} 23</script> 24 25<style> 26// 取得した値に応じてそれぞれ以下のようなクラスを付与したいです。 27.test1 { 28 background-color: red; 29} 30.test2 { 31 background-color: blue; 32} 33.test3 { 34 background-color: yellow; 35} 36.test4 { 37 background-color: green; 38} 39</style> 40

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

クラスの設定 -> v-bind ディレクティブを利用
文言 -> 普通に挿入

で解決します。

v-bind:{属性名} とすることで、HTMLタグの任意の属性に対してJavaScript の式が利用できます。

タグの中身に至っては、そもそも{{ }} で括らなければ普通のHTML同様挿入したテキストがそのまま出力されます。
もちろん、普通のテキストと {{ }} を組み合わせて利用することも可能です。

例えば、ご質問の内容だと、 li タグは以下のようになるでしょう。

html

1<li 2 v-for="data in data" 3 v-bind:class="'test'+data.status" 4> 5 hoge{{data.status}} 6</li>

(判りやすさを優先して冗長に書いています)

投稿2019/03/05 12:54

R.Mizukami

総合スコア1077

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aa316316

2019/03/05 13:57

ご回答ありがとうございます! 確かに教えていただいたやり方で文言の挿入、クラスのバインディング自体は可能だと思うのですが、 非同期でAPIから取得したデータ(status: 1 / 2 / 3 / 4)に合わせて、それぞれ別の文言、クラスを挿入することができないと思います、、 htmlに直接文言、クラス名等書くことなく(データの数やstatusも動的に変化するため)上記実現する方法などありますでしょうか? もし自分が理解できていないだけであれば申し訳ありません! よろしくお願いします。
R.Mizukami

2019/03/05 14:00

Vueはデータの変更を検知してHTMLを更新してくれるので、問題なく動作するはずです。 試せばわかりますよ。
aa316316

2019/03/05 15:13

ありがとうございます! 実際に試してみたところクラスと付け替えに関しては期待していた動作を確認できました!ありがとうございます! ただ、文言に関する点がまだどのようにしていいのかわかっていません。 たしかに、上記ではhoge1、hoge2、、、といったような文言の切り替えはできているのですが、 例えば「未実施」、「試験実施中」、「完了」といったような文言の切り替えを行いたい場合、なにか良い方法はありますでしょうか?
R.Mizukami

2019/03/05 15:18

方法はいくらでもあります。 こちらのドキュメントの「基本的な使い方」の部分を読了されると、大抵のことはできるようになると思うので、是非読んでみてください。 https://jp.vuejs.org/v2/guide/conditional.html (公式ドキュメント 日本語版)
aa316316

2019/03/05 15:29

ありがとうございます! ドキュメントを参考にv-if, v-else-ifで条件をつけて実現することができました! v-if等使ったことはありましたが、難しく考え過ぎていました。 何回もすみません、大変助かりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問