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非常简单，只需使用if并将其链接到for循环中，但我在vue中不会像那样工作，模板甚至只支持if和else，no else-if。

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

如果@ {{item.status}} = 99则显示图像待机，
如果@ {{item.status}} = 0则显示图像失败，
否则显示图像成功，

提前致谢...

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多个如果条件内部为环形叶片laravel

1 个答案: