Vuejs2 multiple if condition - laravel-5

Question

I want to convert my php code into vuejs2 code as I'am changing my adminpanel as vue application(only ui).
I'am following this documentation, https://v2.vuejs.org/v2/guide/conditional.html
This is my art.vue component
<template>
<div class="col-md-8">
<div class="box box-info">
<div class="box-header with-border">
<h3 class="box-title">Latest Artworks</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table no-margin">
<thead>
<tr>
<th>ID</th>
<th>Art</th>
<th>Artist</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr v-for="item in art">
<td>
ART-{{ $art->.id }}
</td>
<td>{{ item.title }}</td>
<td>{{ item.artist.name }}</td>
<td>
<span class="label
<?php
if(item.status == "Pending")
echo 'label-warning';
elseif($art['status'] == "Approved")
echo 'label-success';
else
echo 'label-danger';
?>
">{{$art['status']}}</span> </td>
<td>
<div class="sparkbar" data-color="#00a65a" data-height="20"><canvas width="34" height="20" style="display: inline-block; width: 34px; height: 20px; vertical-align: top;"></canvas></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="box-footer clearfix">
View All
</div>
</div>
</div>
</template>
<script>
export default {
computed : {
latest(){
return this.$store.state.art.latest
}
}
}
</script>
I have seen v-if condition statement, but in my case i have multiple conditions
I want to change this code
<span class="label
<?php
if($art['status'] == "Pending")
echo 'label-warning';
elseif($art['status'] == "Approved")
echo 'label-success';
else
echo 'label-danger';
?>
">{{$art['status']}}</span>

Answer 1

You can achieve multiple conditional views easily using v-else-ifs. Refer to the documentation here.
EDIT: Looking at the code sample it felt that there is no need for v-ifs. To add classes to an element can be done by the means of property binding.
<span class="label
<?php
if(item.status == "Pending")
echo 'label-warning';
elseif($art['status'] == "Approved")
echo 'label-success';
else
echo 'label-danger';
?>
">{{$art['status']}}</span>
can be written like:
<span :class='{label: true, "Pending": item.status === 'value', "label-warning": item.status === 'someOtherValue'}'>{{$art['status']}}</span>
in vuejs for the same effect, read more.

Answer 2

<span v-if="item.status === 'Pending'" class="label label-warning">
{{ item.status }}
</span>
<span v-else-if="item.status === 'Approved'" class="label label-success">
{{ item.status }}
</span>
<span v-else class="label label-danger">
{{ item.status }}
</span>
This solved my issue