Laravel 5.7, Update <options> in a select drop-down with Vue - laravel

Question

I'm writing my first Laravel Vue component and I have this error in console.
[Vue warn]: Computed property "options" was assigned to but it
has no setter.
The code is about two select dropdowns, one with continents and one with countries. I want that when I update the continent the countries get updated.
I just miss to update the options of the second select with the updated values that I have in this.countries.
After the continent change the this.countries variable get updated but the values of the options of the country_id select are not changing.
I've tried adding computed but I get this error.
What am I doing wrong?
<template>
<div>
<div class="form-group continent_id">
<select name="continent_id" v-model="continent_selected" id="continent_id" class="selectpicker" data-live-search="false" title="Pick a continent" v-on:change="getAllCountries(continents)">
<option v-if="continents.length>0" v-for="continent in continents" v-bind:value="continent.id">
{{ continent.name }}
</option>
</select>
</div>
<div class="form-group country_id">
<select name="country_id" v-model="country_selected" id="country_id" class="selectpicker" data-live-search="true" title="Pick a country">
<option v-for="(country, index) in countries" v-bind:value="country.id" >
{{ country.name }}
</option>
</select>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.');
this.loadData();
},
data() {
return {
continents: [],
countries: [],
continent_selected: '',
country_selected: '',
}
},
computed: {
get: function () {
return this.countries;
},
set: function (newValue) {
this.countries = newValue;
}
},
methods: {
loadData: function() {
axios.get('/api/continents')
.then((response) => {
// handle success
this.continents = response.data.data;
this.getAllCountries(this.continents);
})
.catch((error) => {
// handle error
console.log(error);
})
.then(() => {
// always executed
});
},
getAllCountries: function(continents) {
console.log(this.continent_selected);
console.log(continents);
var j = 0;
this.countries = [];
for (var i = 0, len = continents.length; i < len; i++) {
if (!this.continent_selected){
for (var key in continents[i].active_countries) {
this.countries[j] = {id: continents[i].active_countries[key], name: key};
j++;
}
}
else{
console.log("continent selected: "+ this.continent_selected);
for (var key in continents[i].active_countries) {
if (continents[i].id == this.continent_selected){
this.countries[j] = {id: continents[i].active_countries[key], name: key};
j++;
}
}
}
}
}
},
}
</script>

Answer 1

I have solved my issue that was mainly related to the computed set method of the variable optionCountries.
The dropdown was not updating because it use Bootsrap Select, so in order to show the new options it needs to be refreshed.
I've also figure out that I need to add a timeout to the refresh request.
This is the final code.
<template>
<div>
<div class="form-group continent_id">
<select name="continent_id" v-model="continent_selected" id="continent_id" class="selectpicker" data-live-search="false" title="Pick a continent" v-on:change="getAllCountries(continents)">
<option v-if="continents.length>0" v-for="continent in continents" v-bind:value="continent.id">
{{ continent.name }}
</option>
</select>
</div>
<div class="form-group country_id">
<select name="country_id" v-model="country_selected" id="country_id" class="selectpicker" data-live-search="true" title="Pick a country">
<option v-for="(country, index) in optionCountries" v-bind:value="country.id" >
{{ country.name }}
</option>
</select>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.');
this.loadData();
},
data() {
return {
continents: [],
countries: [],
continent_selected: '',
country_selected: '',
}
},
computed: {
optionCountries:{
get: function () {
return this.countries;
},
set: function (newValue) {
this.countries = newValue;
setTimeout(() => {
jQuery('.selectpicker').selectpicker('refresh');
}, 500);
}
}
},
methods: {
loadData: function() {
axios.get('/api/continents')
.then((response) => {
// handle success
this.continents = response.data.data;
this.getAllCountries(this.continents);
})
.catch((error) => {
// handle error
console.log(error);
})
.then(() => {
// always executed
});
},
getAllCountries: function(continents) {
var j = 0;
this.countries = [];
for (var i = 0, len = continents.length; i < len; i++) {
if (!this.continent_selected){
for (var key in continents[i].active_countries) {
this.countries[j] = {id: continents[i].active_countries[key], name: key};
j++;
}
}
else{
for (var key in continents[i].active_countries) {
if (continents[i].id == this.continent_selected){
this.countries[j] = {id: continents[i].active_countries[key], name: key};
j++;
}
}
this.optionCountries = this.countries;
}
}
}
},
}
</script>

Answer 2

In this line you are setting the value of options attribute:
this.options = this.options;
, but, this property is computed:
computed: {
options: function(event) {
return this.countries
}
},
In this case you can:
create a computed setter: https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter
computed: {
options: {
get: function () {
return this.countries;
},
set: function (newValue) {
this.countries = newValue;
}
}
},
Set the value directly:
this.countries = this.options;