Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

191
Visualizações
How to acess array with v-model

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?

about 4 years ago · Santiago Trujillo
2 Respostas
Responde à pergunta

0

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>

This is working example.

about 4 years ago · Santiago Trujillo Relatório

0

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'
            },
        ]
    };
},
about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda