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

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

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

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

Q&A

解決済

1回答

3358閲覧

(Vue.js) v-for内での条件分岐による表示内容の変更方法について

morguri

総合スコア46

Vue.js

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

0グッド

0クリップ

投稿2018/11/18 05:48

前提・実現したいこと

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 }

ループ内で条件分岐をして表示を変えるケースというのは割とあるような気がするのですが
どなたがご教示頂けませんでしょうか。

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

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

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

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

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

guest

回答1

0

ベストアンサー

動かしてないので、正しく動くかわかりせんが。

Nan || 0 にするのが一番簡単そう。

{{ parseInt((item.price / item.container) * item.per_day * 30) || 0 }}
(結果がnullやundefinedの時も0になります)

分かり難いのでFilterを使ったほうが良いかも。

Vue.filter('xxx', val => Number.isNaN(val) ? 0 : val);
とか
Vue.filter('xxx', val => val || 0);
を定義して
{{ parseInt((item.price / item.container) * item.per_day * 30) | xxx }}

filtterドキュメント

投稿2018/11/18 07:01

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

morguri

2018/11/18 10:27

ご回答いただきありがとうございます。 Vue.filter('xxx', val => Number.isNaN(val) ? 0 : val); で試したところ出来ました。 何でも結果を返すのはcomputedばかり使ってしまっていて filtersの存在を忘れていました。 この度は助かりました、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問