Merhabalar,
Aşağıdaki gibi bir componentim var, ulke selectboxında Türkiyeyi seçiyorum ve axios ile illeri çekiyorum. İller geliyor ve sehir selectboxına aktarıyorum. Fakat görünümde selectboxın içi boş öğeyi incele diyip baktığımda v-for döngüye girmiş ve option ları eklemiş. Tekrar farklı bir ülke seçip, tekrar Türkiye yi seçtiğimde ise bu sefer sehir selectboxı içerisindeki şehirler geliyor. Nerede hata yapıyorum, neden select picker işlemden sonra güncellenmiyor?
<template>
<div>
<div class="form-group position-relative mb-1">
<label>{{l.ulke}} <span class="text-danger">*</span></label>
<select v-if="v.ulkeler" class="form-control selectpicker" v-model="ulke" name="ulke" required="" v-bind:title="l.ulkeseciniz" data-live-search="true" data-live-search-normalize="true" data-parsley-pattern="^[a-zA-Z şŞıİĞğçÇÖöÜü]+$">
<option value="0" disabled>{{l.ulkeseciniz}}</option>
<option v-for="(item, index) in v.ulkeler" v-bind:value="{value: index, text: item}">
{{item}}
</option>
</select>
<select v-else class="form-control selectpicker" v-model="ulke" name="ulke" required="" v-bind:title="l.ulkeseciniz" data-live-search="true" data-live-search-normalize="true" data-parsley-pattern="^[a-zA-Z şŞıİĞğçÇÖöÜü]+$">
<option value="" disabled>{{l.ulkeyok}}</option>
</select>
</div>
<div class="form-group position-relative mb-1">
<label>{{l.sehir}} <span class="text-danger">*</span></label>
<select class="form-control selectpicker" v-model="sehir" name="sehir" required="" v-bind:title="l.sehirseciniz" data-live-search="true" data-live-search-normalize="true" data-parsley-pattern="^[a-zA-Z şŞıİĞğçÇÖöÜü]+$">
<option value="0" disabled>{{l.sehirseciniz}}</option>
<option v-for="(item, index) in iller" v-bind:value="{value: item.id, text: item.isim}">
{{item.isim}}
</option>
</select>
</div>
</div>
</template>
<script>
export default {
name: 'TestArayuzu',
data(){
return {
sehir: '',
ulke: 0,
ilce: '',
iller: null
}
},
props: {
v: {
type: Object,
default:{},
},
l: {
type: Object,
default: {},
},
},
methods:{
sehirGuncelle: function (ilceler){
this.iller = ilceler;
$('.selectpicker').selectpicker('refresh');
},
ulkesorgu: function (){
console.log(this.ulke.text)
axios({
url: this.v.axiosurl,
method: 'post',
responseType: 'json',
data: {
u: this.ulke.text
}
})
.then((response) => {
this.sehirGuncelle(response.data.iller[0].ilceler);
}).catch(function (error){
console.log(error)
});
}
},
watch: {
ulke: function (yeniUlke){
if(yeniUlke.value=='TR'){
this.ulkesorgu()
}
console.log(" Yeni: " + yeniUlke.value)
}
},
mounted() {
console.log('bilesen eklendi.')
}
}
</script>