How to acess array with v-model

user_14969316 0
Viewed 25

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?

vuejs3 javascript
2 Answers

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.

user_118879020

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'
            },
        ]
    };
},
user_37797570
Related