Vuejs IF statement
Ad
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')
},
Ad
Answer
Ad
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>
Ad
source: stackoverflow.com
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad