前提・実現したいこと
v-forループ内である簡単な計算をしていて
結果がNaNになる場合は、0を表示するように条件分岐を実行し
表示内容を変更したいのですが上手くいきません。
(ループ内の式の結果は、NaNと返ってくるものもあれば
ちゃんと数値が返るものもあります、)
該当のソースコード
vue
1<div v-for="(item, index) in itemList" :key="item.id"> 2 <span class="item pricemonth"> 3 //下記の式にある3つの項目(price、container、per_day)のいずれかに 4 //0が入っていると結果がNaNになるので、3つの項目のいずれかに0があった場合 5 //決めうちで0を返すようにしたい。 6 //(ループ内で、NaNとなっている行もあれば、数値が返ってくる行もあります) 7 {{ parseInt((item.price / item.container) * item.per_day * 30) }} 8 </span> 9</div>
試したこと
①上記コードのclass="item pricemonth"の右にv-ifを追加する。(その下にspan v-elseも追加)
<span class="item pricemonth" v-if="!zeroExist(index)">
その後computedに以下のような3つの項目の中に0が含まれていれば
trueを返すメソッドを追加した。
vue
1zeroExist(index){ 2if((this.itemList[index].price === 0) || 3 (this.itemList[index].container === 0) || 4 (this.itemList[index].per_day === 0) ||) 5 { return true }
v-if="!zeroExist(index)のため、falseが返ってきた場合は、式の結果を、trueが返ってきた場合は
v-elseにて0が表示されてるようにしたかったのですが、npm run devでエラーは出ないものの画面に何も表示されない。
(ちなみに公式によると、v-forとv-ifを一緒に使うことは非推奨らしいです)
② v-for内に以下のような式を書いてみたが、npm run devが通らない。
(マスタッシュ構文にこのような文は書けないとのエラー)
vue
1{{if(Number.isNaN(parseInt((item.price / item.container) * item.per_day * 30))){ 2 parseInt((item.price / item.container) * item.per_day * 30) 3 }else{ 4 0} 5}}
③Number.isNaNを使ったcalc(index)というメソッド(式の結果 or 0をreturnする)を作りv-for内に入れてみたがやはりダメでした。
vue
1computed:{ 2 calc:function(index) { 3 if (Number.isNaN(parseInt ( 4 this.itemList[index].product_price / this.itemList[index].servings_per_container) * this.itemList[index].per_day * 30)){ 5 return parseInt(0) 6 }else{ 7 return parseInt((this.itemList[index].product_price / this.itemList[index].servings_per_container) * this.itemList[index].per_day * 30) 8 }
ループ内で条件分岐をして表示を変えるケースというのは割とあるような気がするのですが
どなたがご教示頂けませんでしょうか。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/18 10:27