I have a select from an array of objects but it also sends an array and I have no idea how to do this can anyone help me?
<p class="ml-2">Perfil</p>
<select id="input" class="border-2 p-2 rounded mr-3 mt" v-model="form.perfis.id">
<option v-for="per in perfis" :key="per.id" :value="per.id" >
{{ per.descricao }}</option>
</select>
'perfis': [
{
'id': ''
}
]
how do i access this id?
You need to set a data property with the default value you want for the select
For example, if you want set the default value for the select is the second perfis item selectValue: perfis[1].id
<template>
<p class="ml-2">Perfil</p>
<select id="input" class="border-2 p-2 rounded mr-3 mt" v-model="selectValue">
<option v-for="per in perfis" :key="per.id" :value="per.id">
{{ per.descricao }}
</option>
</select>
</template>
<script>
const perfis = [
{
id: "1",
descricao: "one",
},
{
id: "2",
descricao: "two",
},
{
id: "3",
descricao: "three",
},
];
export default {
name: "App",
data() {
return {
perfis,
selectValue: perfis[1].id,
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
You can access to the id from v-model for example: selectedPerfis
<select id="input" class="border-2 p-2 rounded mr-3 mt" v-model="selectedPerfis">
<option v-for="per in perfis" :key="per.id" :value="per.id" >
{{ per.description}}
</option>
</select>
data() {
return {
selectedPerfis: null,
perfis: [
{
id: '1',
description: 'A'
},
{
id: '2',
description: 'B'
},
{
id: '3',
description: 'C'
},
]
};
},