Vue Multiple if condition inside for loop blade laravel

Question

所以我在 laravel 的 blade 模板中有这个条件，所有项目值都是从使用 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 中真的很简单，只需使用 if 并将其链接到 for 循环中，但我在 vue 中不那样工作，模板甚至只支持 if 和 else，没有 else-if .

如何使用 vue 在 blade 模板中实现：

if @{{ item.status }} = 99 then show image standby,
if @{{ item.status }} = 0 then show image failed,
否则显示图像成功，

提前致谢...

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>

Vue Multiple if condition inside for loop blade laravel

Vue Multiple if condition inside for loop blade laravel

vue.js

laravel-blade

laravel-5.3