lindstrom
334
5
Vue

Vue Default Selection for Select

Posted 9 months ago by lindstrom

Getting my feet wet with Vue and I'm looking for validation of my implementation of selecting a default value for a select input.

I have a component with a simple form. I pass company data to it for use in populating select options. This works and is (approximately) what I have:

<create-account :company="{{ $companies->toJson() }}"></create-account>

Inside the component:

<template>
// form fields
    // is binding data like what follows kosher?
    <select v-model="form.company_id, selected" 
                  name="company_id">
        <option v-for="company in companies"
                        :value="company.id"
                        v-text="company.name"></option>
    </select>
// more fields
</template>

<script>
    export default {
        props: ['companies'],
        data() {
            return {
                form: new Form({
                    name: '',
                    display_name: '',
                    company_id: '1 ', // initial value
                    phone: '',
                }),
                selected: '1' // value of desired selection
            }
        },
// methods etc
}
</script>

Didn't really find anything to support this so I can only assume this is how it's done. Are there other, more "correct", ways to achieve the same thing? Thanks for any, ah hem, input!

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

Reply to

Use Markdown with GitHub-flavored code blocks.