Set selected option selected inside a loop Vue.js

Question

Im looping over a list of objects and I'm trying to have the status of the object be 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>

Here i have all the statuses that i need to display but im having a hard time getting a selected value to be selected for each object that im looping over through.

Ja9ad335h · Accepted Answer · 2019-09-10 20:29:10Z

1

you need to $emit the status change to parent Component so that new status will be assigned to specific client object. (no mutation of props in child)

    <select :value="client.status" @change="$emit('change', $event.target.value, client.uuid)">
        <option v-for="status in statuses" :selected="status == client.status">{{status}}</option>
    </select>

and on your parent Component, capture this emit and assign it to the client

<ParentComponent @change="(status, uuid) => clients.find(c => c.uuid === uuid).status = status">
    // child with props: filteredClients
</ParentComponent>

answered Sep 10, 2019 at 20:29

Ja9ad335h

5,0652 gold badges23 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Set selected option selected inside a loop Vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related