When iterating through a list of objects, I am struggling to set the status of each object as selected by default.
<template>
<table class="table is-striped">
<thead>
<tr>
<th>
Client
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr v-for="client in filteredClients">
<td>
<router-link :to="{ name:'client-show' , params:{clientId: client.uuid}}"
v-on:click.native="selectClient(client)">
{{ client.name }}
</router-link>
</td>
<td>
<div class="select is-rounded">
<select v-model="selectedStatus" @change="statusChange($event, client)">
<option v-for="status in statuses" > {{status}}</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
</template>
<script>
export default {
props: [
'filteredClients'
],
data: function() {
return {
statuses: [ 'Started', 'Awaiting Payment', 'Paid', 'Onboarding', 'Live']
}
},
computed: {},
mounted() {},
methods: {}
}
</script>
I have all the necessary statuses to display, but setting a default value for each object during iteration is proving to be a challenge.