Допустим в родительском компоненте после монтирования происходит запрос к серверу и получение данных. На основе полученных данных мы получаем массив доступных элементов, которые в упрощенном варианте выводятся в select. А также можем получить значение текущего элемента ( при условии что нужно отредактировать элемент).
Так вот событие onMounted в дочернем компоненте происходит раньше чем в родительском. Это приводит к тому, что не происходит выбора текущего элемента в select.
Пример простого дочернего компонента приведен ниже.
Подскажите пожалуйста как правильно будет реализовать данную задачу?
<template>
<select
v-model="supportSelect"
style="max-width: 350px">
<option value="">Не использовать</option>
<option v-for="(item, index) in technicalSupportList"
:value="item.id"
:key="item.id">
{{ item.name }}
</option>
</select>
</template>
<script>
import {onMounted, ref, unref, watch} from "vue";
export default {
props: {
technicalSupport: {
type: Array
},
current:{
type: Object
}
},
setup(props, context){
let supportSelect = ref('');
let technicalSupportList = ref([]);
technicalSupportList.value = props.technicalSupport;
onMounted(()=>{
supportSelect.value = props.current.id ?? ''
})
return {
supportSelect,
technicalSupportList
}
}
}
</script>
