How can I get selected value on the dropdown with vue.js?

Question

I have parent component vue like this :

<template>
    <form>
        <div class="row">
            <div class="col-md-4">
                <form-select id="color" name="color" :data="color">Color</form-select>
            </div>
            <div class="col-md-4">
                <form-select id="size" name="size" :data="size">Size</form-select>
            </div>
        </div>
        ...
        <a href="javascript:" class="btn btn-danger" @click="add">
            Add
        </a>
    </form>
</template>

<script>
    import FormSelect from '../form/FormSelect.vue'
    export default {
        data(){
            return {
                quantity: [
                    {id: 1, value: '1'},
                    {id: 2, value: '2'},
                    {id: 3, value: '3'}
                ],
                size: [
                    {id: 1, value: 'S'},
                    {id: 2, value: 'M'},
                    {id: 3, value: 'L'}
                ]
            }
        },
        components: {FormSelect},
        methods: {
            add(event) {
                const color = document.getElementById('color').value,
                      size = document.getElementById('size').value
            }
        }
    }
</script>

I have child component vue like this :

<template>
    <div class="form-group">
        <label :for="id" class="control-label"></label>
        <select :id="id" :name="name" class="form-control" v-model="selected">
            <option v-for="item in data">{{item.value}}</option>
        </select>
    </div>
</template>

<script>
    export default {
        props: ['id', 'name', 'data'],
        data(){
            return {
                selected: ''
            }
        }
    }
</script>

If I click add button, I success get values selected. But it still using javascript (document.getElementById)

I want to change it. So I want to using data binding vue component. But i'm still confused to use it

How can I do it with data binding?

tony19 · Accepted Answer · 2022-07-16 03:26:13Z

1

You need to emit the event from child component to send your data and use the on method to get that data in the parent component:

Parent:

<form-select id="color" name="color" :data="color" v-on:triggerChange="changeColor">Color</form-select>

methods: {
 // ...
 changeColor(selected) {
   // do what you want to do with selected
 }
 // ...
}

Child:

<select :id="id" :name="name" class="form-control" v-model="selected" v-on:change="applyColor">

methods: {
 // ...
 applyColor() {
   this.$emit('triggerChange',this.selected);
 }
 // ...
}

As per your comment, you can do like this:

this.$parent.$options.methods.someParentMethod(data)

Note:

Use $parent and $children sparingly - they mostly serve as an escape-hatch. Prefer using props and events for parent-child communication.

edited Jul 16, 2022 at 3:26

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Feb 20, 2018 at 4:38

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

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

3 Comments

moses toh Over a year ago

Is there any other way without using emit? I've read here : this.$parent.updateMehodeParent(param). It can used in child component to update method in the parent. Is the way can used in my case?

Bhojendra Rauniyar Over a year ago

Updated my answer.

moses toh Over a year ago

It seems it can not to use this.$parent.$options.methods.someParentMethod(data). Because it can not distinguish between color selected and size selected before update the parent component

tony19 · Accepted Answer · 2022-07-15 05:57:20Z

Everything seems to be correct when you develop new things. Above answer is totally correct and appreciate the answer provided on time.

Posting this answer to describe the answer in more details. While developing application in Vue, you must have to understand few things like.

A. Communication between parent and child component

B. Non Parent-Child Communication

A. Communication between parent and child component

Lets understand the communication between parent and child component. I have broke down into steps are few things to keep in mind

i) Bind some method X with parent so that method can listen emitted message by child

ii) Add props property in child component to bind data in child component

iii) this.$emit the same message (X) that is bind in parent component.

Parent component

<template>
<form>
    <div class="row">
        <div class="col-md-4">
            <form-select id="color" name="color" (dropdownChanged)= 'colorChanged' :data="color">Color</form-select>
        </div>
        <div class="col-md-4">
            <form-select id="size" name="size" :data="size" (dropdownChanged)= 'sizeChanged'>Size</form-select>
        </div>
    </div>
    ...
    <a href="javascript:" class="btn btn-danger" @click="add">
        Add
    </a>
</form>
</template>

<script>
    import FormSelect from '../form/FormSelect.vue'
    export default {
        data(){
            return {
                quantity: [
                    {id: 1, value: '1'},
                    {id: 2, value: '2'},
                    {id: 3, value: '3'}
                ],
                size: [
                    {id: 1, value: 'S'},
                    {id: 2, value: 'M'},
                    {id: 3, value: 'L'}
                ]
            }
        },
        components: {FormSelect},
        methods: {
            add(event) {
                const color = document.getElementById('color').value,
                      size = document.getElementById('size').value
            },
            colorChanged(color) {
               console.log('Color Changed', color);
            },
            sizeChanged(size) {
               console.log('size Changed', color);
            },
        }
    }
</script>

Child Component

<template>
    <div class="form-group">
        <label :for="id" class="control-label"></label>
        <select (change)='dropdownChanged' :id="id" :name="name" class="form-control" v-model="selected">
            <option v-for="item in data">{{item.value}}</option>
        </select>
    </div>
</template>

<script>
    export default {
        props: ['id', 'name', 'data'],
        data(){
            return {
                selected: ''
            }
        },
       methods: {
         dropdownChanged() {
           this.$emit('changesOccured',this.selected)
         }
       }
    }
</script>

B. Non Parent-Child Communication

Sometimes two components may need to communicate with one-another but they are not parent/child to each other. In simple scenarios, you can use an empty Vue instance as a central event bus:

var bus = new Vue()
// in component A's method
bus.$emit('id-selected', 1)
// in component B's created hook
bus.$on('id-selected', function (id) {
  // ...
})

Reference - https://v2.vuejs.org/v2/guide/components.html

Collectives™ on Stack Overflow

How can I get selected value on the dropdown with vue.js?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related