javascript - Vuejs IF 语句

Question

我有一个当前使用 vue.js 的页面

我已经在 v-for 元素中输出了数据库中的所有结果，每个结果的侧面都有一个用于激活/停用的按钮。每次单击 active 时，都会触发我的 vue.js 中的一个方法并更新状态为 1 的记录。

我正在尝试获取结果以根据状态显示相应的按钮。

状态 = 1 仅显示停用按钮状态 = 0 仅显示激活按钮

我的状态默认记录值为 0

这是到目前为止我的代码。

HTML:

<div class="col-xs-3" v-for="record in records">
                        <div class="user-view">
                            <div class="image">
                                <img src="{{ url() }}@{{record.photo}}">
                                    <p>@{{record.name}}</p>
                                    <button class="btn btn-block" @click="ActivateRecord(record.id)">Activate</button>
                                    <button class="btn btn-block">Deactivate</button>
                                </div>
                        </div>
                    </div>

我的 Vue.js 文件上的方法

ActivateRecord: function(id){
      this.$http.post('/api/record/' + id + '/activate')
    },

Answer 1

只需使用v-if (http://vuejs.org/api/#v-if):

                <div class="col-xs-3" v-for="record in records">
                    <div class="user-view">
                        <div class="image">
                            <img src="{{ url() }}@{{record.photo}}">
                            <p>@{{record.name}}</p>
                            <button class="btn ban-block" v-if="record.status == 0" @click="ActivateRecord(record.id)">Activate</button>
                            <button class="btn ban-block" v-if="record.status == 1">Deactivate</button>
                        </div>
                    </div>
                </div>