I have a parent Vue component structured 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>
Additionally, I have a child Vue component structured as follows:
<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>
Although I'm able to successfully get the selected values by clicking the "Add" button using JavaScript (document.getElementById), I want to transition to utilizing data binding within the Vue component structure. However, I am unsure of how to implement it.
Can anyone provide guidance on how to achieve this with data binding?