finchy70
169
10
Vue

Pass query result to vue component via axios to populate a dropdown.

Posted 1 month ago by finchy70

I have started building a Vue component that will populate a dropdown then depending on whats selected populate a text area.

Select box in template.

<div class="card-body">

                <select class="form-control" v-model="selected" @change=getSelected>
                    <option disabled value="">Please select one</option>
                    <option v-for="prelim in this.preliminaries" v-bind:value="prelim.id">{{ prelim.name }}</option>
                </select>

            </div>

function to populate dropdown

<script>
    export default {
        name: "PrelimSelector",
        data(){
            return {
                preliminaries: [],
                selected: null,
                errors: []
            }
        },

        methods: {
            getSelected(){

            }

        },
        created() {
            function getPrelims() {
                axios.get('/prelims/prelim_list')
                    .then((response) => {
                        // handle success
                        console.log("success response= ");
                        this.preliminaries = response.data;
                        console.log("Prelims="+this.preliminaries);
                    });
            }

            getPrelims();
        },

    }
</script>

controller

public function prelim_list()
    {
        return response()->json(Prelim::orderBy('name', 'asc')->get());
    }

I keep getting the following error.

Uncaught (in promise) TypeError: Cannot set property 'preliminaries' of undefined at app.js:1920

I have done something similar to this before with no problems. Any idea what I'm doing wrong?

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