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> 

而且下面是我在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); 
      }); 
     }, 

在Laravel是非常簡單的只用，如果用鏈條拴住它甚至在for循環中，但我在vue中不能像那樣工作，而且模板甚至只支持if和else，沒有別的 - 如果。

如果@ {{item.status}} = 99，那麼顯示的圖像待機，
如果@ {{item.status}} = 0，則顯示的圖像：

如何在刀片模板使用VUE實現失敗，
其他然後顯示圖像的成功，提前

謝謝...

Answer 1

Vue公司確實支持else-if，雖然只是因爲2.1.0，也許你只需要一個較新的版本。

雖然你的代碼應該在技術上有效，但是你有一些語法問題（在第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>