v-if内の複雑な条件

Question

v-if指示に渡す複雑な条件を作成したいと考えています。

私は以下を試しました。

<div v-if="(order.order_products[key].statuses[0].id) != 3 || order.status != 3" > 

Vueのv-ifに複合条件を追加できますか？これは動作していません。

私も&&で試しましたが、それも機能しませんでした。私はこれについてのドキュメンテーションに何も見つかりませんでした。

Answer 1

まず、質問にお答えします。

Vueのv-ifに複合条件を追加できますか？

あなたがオペレータ||または&&を含む複雑なブール式を含むVueの中v-ifディレクティブに任意のJavaScript式を渡すことができます。

あなた自身でテストすることができます。たとえば、次のテンプレートを用意してみてください。

<div v-if="1 == 2 || (1 + 2 == 3 && 4 == 4)">I am visible!</div> 

---

あなたの表現がよさそうだが、提供された情報に基づいて、それが正確に何が間違っている推測することは不可能だ。もちろん

<div v-if="true && false">I am not visible!</div> 

は、あなたも、あまり些細な何かを試してみるかもしれません。

あなたの問題は他のものです：データがあなたが思ったようなフォーマットでないか、ロジックに欠陥があるかもしれません。

Answer 2

はい、複雑な条件を設定できます。 Vue計算フィールドを使うことをお勧めします。そうすれば、v-if式で使用される変数のより良い強調表示（Vue Devtoolsによる）が得られます。

computed: { 
    orderStatusId: function() { 
     // Write some checks is variable defined/undefined 
     return this.order.order_products[key].statuses[0].id 
    }, 
    orderStatus: function() { 
     return this.order.status 
    } 
} 

と式は次のようになります場合は、V-：このアプローチでは

<div v-if="orderStatusId !== 3 || orderStatus !== 3" > 

あなたは変数の値を確認することができますが、このような計算フィールドを設定することができますので、私は、順序がデータ・フィールドであると仮定しますあなたのv-if式で。

Answer 3

はい、v-if引用符内に任意のJavaScript表現を使用できます。 しかし、関数や計算された関数を作成し、if文の中で呼び出すことをお勧めします。

例：

computed: { 
    shouldDisplay: function() { 
    return this.order.order_products[key].statuses[0].id) !== 3 || this.order.status !== 3; 
    } 
    ... 
} 

<div v-if="shouldDisplay"> ... </div>