Hola, estoy tratando de hacer un campo de ciudad - distrito y estos 2 campos están conectados entre sí, como puedes adivinar. Este lugar funciona como una página de edición. Tengo datos de ciudad y distrito que provienen de la API. Puedo mostrar bien los datos de la ciudad, pero cuando el usuario selecciona otra opción en ese campo de selección, debo borrar los datos del distrito porque vue-select no los borra, ni siquiera v-model en las opciones.

El problema es esto después de que la página carga el primer método "setAddressCity" que funciona y borra el campo del distrito, por lo que no puedo mostrar ningún dato en el campo del distrito. Que puedo hacer por favor ayuda.

Estoy usando vue-select mi código como este.

 <v-select placeholder="City" :options="Cities" v-model="addressCity" class="wide" @input="setAddressCity" name="address-city" label="name" value="id" > <span slot="no-options">Sorry, the country could not be found</span> </v-select> <v-select v-model="addressDistrict" :options="addressDistricts" class="wide" label="name" name="address-county" placeholder="District" value="id" @input="setAddressDistrict" > <span slot="no-options">Sorry, the provience could not be found</span> </v-select>

Ciudades y distritos viene de api.

 setAddressCity(city) { if (!city) { this.form.address.city_id = null; this.form.address.city_readable = null; return; } this.form.address.city_id = city.id; this.form.address.city_readable = city.name; this.form.address.district_id = null; this.form.address.district_readable = null; this.getDistricts(city.id, districts => { this.addressDistricts = districts; }); }, setAddressDistrict(district) { if (!district) { this.form.address.district_id = null; this.form.address.district_readable = null; return; } this.form.address.district_id = district.id; this.form.address.district_readable = district.name; },

esto es campos de datos calculados

 addressCity: { get: function() { if (this.form.address.city_id) { return { id: this.form.address.city_id, name: this.form.address.city_readable }; } return null; }, set: function() {} }, addressDistrict: { get: function() { if (this.form.address.district_id) { return { id: this.form.address.district_id, name: this.form.address.district_readable }; } return null; }, set: function() {} },

Y este es el código getDisctrict

 getDistricts(cityID, callback) { $axios.get('district?city_id=' + cityID).then(s => { callback(s.data.data); }); }