Vuejs IF statement

Question

I have a page which currently uses vue.js

I have outputted in a v-for element all the results from the database, at the side of each result there is a button for active / de-active. Every time active is clicked this fires a method within my vue.js and updates the record with status of 1.

I'm trying to get the results to show the corresponding button depending on status.

Status = 1 Show Deactivate button only Status = 0 Show Activate button only

my default record value for status is 0

Here's my code so far.

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>

Method on my Vue.js file

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

David K. Hess · Accepted Answer · 2015-12-21 13:55:21Z

1

Just use 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>

answered Dec 21, 2015 at 13:55

David K. Hess

17.3k2 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dev.W Over a year ago

Thanks that worked a treat! just out of interest you don't know if there is a way of utilizing a chunk method do you? I'm outputting results in <div class="col-xs-3"></div> and as you can imagine after 4 results the the formatting isn't right.

pespantelis · Accepted Answer · 2015-12-21 14:33:53Z

0

You could use the v-if and v-else directives [ref]:

<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">Deactivate</button>
            <button class="btn ban-block" v-else @click="ActivateRecord(record.id)">Activate</button>
        </div>
    </div>
</div>

answered Dec 21, 2015 at 14:33

pespantelis

15.4k7 gold badges46 silver badges47 bronze badges

Collectives™ on Stack Overflow

Vuejs IF statement

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related