Vue複数のループ内の条件laravel

Question

私はlaravelのブレードテンプレートでこの条件を持っていましたが、すべてのアイテムの値はvueを使って計算されたメソッドから得られました。問題は条件に基づいて値を変更したいのです3条件を持っている、これは私のコードです：

<tr v-for="item in items"> 
         <td>@{{ item.nama }}</td> 
         <td>@{{ item.ndaftar }}</td> 
         <td> 
          <template v-if="item.status === 99"> 
           <img src='{{ asset("images/standby.jpg") }}'> 
          </template> 
          <template v-else-if="item.status = 0"> 
           <img src='{{ asset("images/failed.jpg") }}'> 
          </template> 
          <template v-else> 
           <img src='{{ asset("images/success.jpg") }}'> 
          </template> 
         </td> 
</tr> 

以下Laravelでantrian.js

getVueItems: function (page) { 
      this.$http.get('/antrianitems?page=' + page).then((response) => { 
       this.$set('items', response.data.data.data); 
       this.$set('pagination', response.data.pagination); 
      }); 
     }, 

の私の方法は次の場合にだけ使用して、本当に簡単で、forループも、内部のそれをチェーンが、私れますそれはvueのようなものではなく、テンプレートはifやelseだけをサポートしています。 else-ifはありません。 @は、{{item.statusが}}が99は、画像スタンバイを示し、
@ {{item.status}} = 0が、その後表示された場合、画像をIF =

：

にはどうすればVUE使用して、ブレード・テンプレートに達成しません唯一の2.1.0以来、多分あなただけのより新しいバージョンを必要とするものの、
は他に、その後、事前に

おかげで...

Answer 1

Vueの実際else-ifをサポートしていないが、画像の成功を示して、失敗しました。

構文上の問題がありますが（8行目では、代入の代わりに比較を行い、残りの部分が--}}のようです）、コードは技術的にはうまくいくはずです。

しかし、それはあなたのコンポーネントのメソッドを記述することです行うにはきれいな方法：

methods: { 
    getItemImage: function(status) { 
    if (status === 99) { 
     return 'Standby'; 
    } else if (status === 0) { 
     return 'Failed'; 
    } else { 
     return 'Success'; 
    } 
    } 
} 

あなたのテンプレートは、その後に減少させることができます：それは元の画像の名前を示し作品

<tr v-for="item in items"> 
    <td>@{{ item.nama }}</td> 
    <td>@{{ item.ndaftar }}</td> 
    <td> 
    <img :src="getItemImage(item.status) + '.jpg'" /> 
    </td> 
</tr>