前提・実現したいこと
現在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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/03/05 13:57
2019/03/05 14:00
2019/03/05 15:13
2019/03/05 15:18
2019/03/05 15:29