finchy70
189
5
Vue

Vue Select: How do I mark an option as selected dependant on id?

Posted 1 month ago by finchy70

I pass the current id of an object via props (id_check) and loop through an array of objects to populate a select dropdown. I cant pre select the object with the same id as the check_id.

<template>
    <div>

        <p v-if="errors.length">
            <b>Please correct the following error(s):</b>
            <ul>
                <li v-for="error in errors">{{ error }}</li>
            </ul>
        </p>
        <div class="card">
            <div class="card-header">
                <div class="row">
                    <h3 class="ml-3 mr-3 mt-1">Select Existing Preliminaries or </h3>
                    <a href="/prelims" class="float-right btn btn-sm btn-outline-dark mt-2 mb-2">Create New</a>
                </div>
            </div>
            <div class="card-body">
                <label class="mb-2">Name</label>
                <select class="form-control mb-5" v-model="selected" @change=getSelected>
                    <option disabled value="">Please select one</option>
                    <option v-for="prelim in this.prelimdata" :value="prelim"
                            :selected="(prelim.id === id_check)">{{ prelim.name }}</option>
                </select>

                <label class="mb-2">Preliminaries Description</label>
                <textarea class="form-control" rows="10">{{ current_prelim }}</textarea>

                <div class="row">
                    <button class="mt-2 ml-auto mr-3 btn btn-success -btn-sm" @click=savePrelim>Save</button>
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "PrelimSelector",
        props: ['task_id', 'id_check'],
        data(){
            return {
                prelimdata: [],
                selected: null,
                errors: [],
                current_prelim: '',
                current_prelim_id: null,
            }

        },
        methods: {
            getSelected(){
                this.current_prelim = this.selected.prelims;
                this.current_prelim_id = this.selected.id;
            },

            getPrelims() {
                axios.get('/prelims/prelim_list')
                    .then((response) => {
                        // handle success
                        this.prelimdata = response.data;
                        // console.log("Prelims="+this.preliminaries);
                    })
                    .catch(e => {
                        if(e){
                            this.errors.push("Error!!");
                        }

                    });
            },

            savePrelim(){
                if(this.selected == null){
                    return;
                } else {
                    this.errors = [];
                    axios.patch('/tasks/'+this.task_id+'/add_prelims', {
                        add_prelim_id: this.current_prelim_id
                    })
                        .then((response)  => {
                            console.log("SUCCESS!!!!");
                            flash('Preliminaries added to current task!!');
                        })
                        .catch(e => {
                            if(e){
                                this.errors.push("A model with this name already exists!!");
                            }

                        });
                }
            }

        },

        created() {
            console.log("ID="+this.id_check);
            this.getPrelims();

        },
    }
</script>

<style scoped>

</style>

I have tried a few combinations of :selected="(prelim.id === id_check)" with no success. Can anyone show me how I do it?

Please sign in or create an account to participate in this conversation.