Is there a way to trigger a method in the parent component from an action on a child component? In my case, I have added a b-country-select component to the parent component and want it to activate the test method when a change occurs. The component loads successfully but nothing happens when there is a change. However, the tester2 model does work.
Component: BCountrySelect.vue
<template>
<select class="form-control v-model="country">
<option v-for='data in countries' :value='data.id'>{{ data.name }}</option>
</select>
</template>
<script>
export default {
data(){
return {
country: 0,
countries: [{"id":1, "name":"USA"}, {"id":2, "name":"UK"} ]
}
},
methods:{
getCountries: function(){
axios.get('/api/getCountries')
.then(function (response) {
this.countries = [{"id":0,"name":"- Select Country -"}].concat(response.data);
}.bind(this));
},
},
created: function(){
// this.getCountries()
}
}
</script>
Parent::
<template>
<div class="container">
<div class="form-group">
<label>Country:</label>
<b-country-select v-model="tester1" @change="test()"/>
</div>
<div class="form-group">
<label>Country:</label>
<select class='form-control' v-model="tester2" @change="test1()">
<option v-for='data in countries' :value='data.id'>{{ data.name }}</option>
</select>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
},
data(){
return {
tester1: 0,
tester2: 0,
countries: [{"id":1, "name":"USA"}, {"id":2, "name":"UK"} ]
}
},
methods:{
test: function() {
console.log('hi there!');
}
}
}
</script>