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://vuejs.org/v2/guide/components.html
