Reputation: 2370
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')
},
Upvotes: 0
Views: 1762
Reputation: 15382
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>
Upvotes: 0
Reputation: 17246
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>
Upvotes: 1