v-forとv-ifの競合について
概要
配列をv-forでレンダリングしようと思ったときに各要素にtransitionをかけるためv-forの各要素にv-ifで条件分岐を付けたのですがlintでnot-recommendされてしまいました。
動作はするので無視するなりeslintrcを修正するなりすればいい話ではあるのですが、computedで同様にtransitionをかけようとおもったらどのような実装になるのでしょうか。
元ソース
vue
1 <ul class="c-firstView__news__list"> 2 <li 3 v-for=" ( item, index ) in newsList.list " 4 v-if=" newsList.state === index " 5 :key=" index " 6 class="c-firstView__news__list__item" 7 > 8 <a :href=" item.url ">{{ item.title }}</a> 9 </li> 10 </ul> 11//~~中略~~ 12 data(){ 13 newsList: { 14 state: 0, 15 list: [ 16 { 17 date: '2019-02-16', 18 title: 'コーポレートサイトリニューアル!', 19 url: '//blog/0001' 20 }, 21 { 22 date: '2019-02-17', 23 title: 'コーポレートサイトリニューアル?', 24 url: '//blog/0002' 25 }, 26 { 27 date: '2019-02-18', 28 title: 'コーポレートサイトリニューアル!?', 29 url: '//blog/0003' 30 }, 31 ] 32 } 33 }, 34
computedでフィルタリング化
vue
1 <ul class="c-firstView__news__list"> 2 <li 3 class="c-firstView__news__list__item" 4 > 5 <a :href=" filterdList.url ">{{ filterdList.title }}</a> 6 </li> 7 </ul> 8//~~中略~~ 9 data(){ 10 newsList: { 11 state: 0, 12 list: [ 13 { 14 date: '2019-02-16', 15 title: 'コーポレートサイトリニューアル!', 16 url: '//blog/0001' 17 }, 18 { 19 date: '2019-02-17', 20 title: 'コーポレートサイトリニューアル?', 21 url: '//blog/0002' 22 }, 23 { 24 date: '2019-02-18', 25 title: 'コーポレートサイトリニューアル!?', 26 url: '//blog/0003' 27 }, 28 ] 29 } 30 }, 31 computed: { 32 filterdList: function(){ 33 return this.newsList.list[this.newsList.state]; 34 } 35 }, 36
ご教示いただけたら幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/19 04:59