0
109
VistasEstablezca el valor predeterminado en el menú de selección de opciones con Vue3
Obtengo todas las categorías:
const getCategories = async () => {
let response = await axios.get(`/api/get_all_category/`)
categories.value = response.data.categories
}
categorías.valor se ve así:
Establecí la opción por defecto:
let selectedCategory
const getSingleProduct = async () => {
let response = await axios.get(`/api/get_edit_product/${props.id}`)
form.value = response.data.product
//form.value.category_id is a number from 1 to 6
selectedCategory = ref(form.value.category_id)
}
Construyo la etiqueta de selección:
<div class="my-3">
<p>Product type</p>
<select v-model="selectedCategory">
<option v-for="category in categories" :key="category.id" :value="category.id">
{{ category.name }}
</option>
</select>
</div>
Puedo ver todas las opciones correctamente, pero la opción predeterminada no está configurada en consecuencia.
·
Santiago Trujillo
1 Respuestas
Responde la pregunta0
Intente primero definir la categoría selectedCategory como reactiva con ref :
const { ref, computed } = Vue
const app = Vue.createApp({
setup() {
const categories = ref([{id: 1, name: 'aaa'}, {id: 2, name: 'bbb'}, {id: 3, name: 'ccc'}])
let selectedCategory = ref(null)
const getSingleProduct = () => {
//let response = await axios.get(`/api/get_edit_product/${props.id}`)
// form.value = response.data.product
//form.value.category_id is a number from 1 to 6
selectedCategory.value = 3
}
getSingleProduct()
return { categories, selectedCategory }
},
})
app.mount('#demo')
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<div class="my-3">
<p>Product type</p>
<select v-model="selectedCategory">
<option v-for="category in categories" :key="category.id" :value="category.id" :selected="selectedCategory">
{{ category.name }}
</option>
</select>
</div>
</div>
·
Santiago Trujillo
Denunciar
Responde la pregunta