1

Tenho um select num formulário, e os itens desse select é populado dinamicamente pelo vue.js.

O meu problema é que quando eu abrir um cadastro salvo no banco de dados para edição neste formulário, eu preciso fazer com que alguns itens seja selecionado de acordo com o que foi salvo antes, e não sei como fazer isto.

Se alguém conhecer outra biblioteca parecida com vue.js que seja tão leve quanto e mais fácil de usar, eu tbm aceito sugestões ♥.

Segue o meu código:

var setores = new Vue({
  el: '#v-for-negociossetores',
  data: {
     setoresitens: {"countcats":16,"countsubcats":56,"catsubcatsdata":{"123":{"titulo":"Alimentos","descricao":"Padarias, Mercados, Restaurantes, Lanchonetes e etc.","subcats":{"345":{"codurl":"restaurantes","titulo":"Restaurantes","descricao":""}}},"abc":{"titulo":"Religiões","descricao":"","subcats":{"def":{"codurl":"igrejas","titulo":"Igrejas","descricao":""},"ghi":{"codurl":"religiao-casas","titulo":"Casas","descricao":""},"jkl":{"codurl":"religiao-templos","titulo":"Templos","descricao":""},"mno":{"codurl":"religiao-terreiros","titulo":"Terreiros","descricao":""}}}}}
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 <div class="row clearfix">
     <div class="col-sm-3">
<div class="form-group" id="v-for-negociossetores">
  <select name="codsetores[]" class="form-control show-tick" multiple title="Setores">
      <optgroup v-for="(group, keygroup) in setoresitens.catsubcatsdata" v-bind:label="group.titulo">
          <option v-for="(option, keyoption) in group.subcats" v-bind:value="keyoption">
            {{ option.titulo }}
            </option>
        </optgroup>
    </select>
</div>
    </div>
  </div>

7
  • Nossa Samantha, ficou bem confuso essa sua pergunta. Se entendi o que você quer é popular o select com os dados do Banco é isto?
    – LeAndrade
    Commented 16/10/2018 às 14:12
  • 1
    Use conforme o exemplo do manual (segundo exemplo para selects): vuejs.org/v2/guide/forms.html#Select
    – bfavaretto
    Commented 17/10/2018 às 2:24
  • @LeAndrade desculpa, eu não sei como explicar melhor na pergunta. Mas não é isso não, popular o select eu ja consigo que é o que esta na pergunta. Mas a população do select vem de um arquivo em json. O q preciso é quando abrir um registro cadastrado no banco de dados, que além de popular o select como eu ja faço, que ele ja deixe selecionado os itens que foram salvos anteriormente. Não sei se to conseguindo explicar direito. Commented 17/10/2018 às 3:42
  • @bfavaretto eu olhei a documentação, foi assim que eu consegui chegar até onde eu postei. Mas ainda não sei como deixar alguns itens selecionados. Não vi nenhum exemplo parecido na documentação, ou pelo menos não entendi caso tenha algo falando sobre isso lá. Você pode me ajudar com alguma explicação mais prática? por favor Commented 17/10/2018 às 3:45
  • 2
    Precisa de um atributo v-model=seumodelo na tag select. E no seu objeto data, um seumodelo: valor_selecionado. Acho que é só isso.
    – bfavaretto
    Commented 17/10/2018 às 4:37

2 Respostas 2

1

Só para fins de deixar registrado aqui no site para consultas em futuras questões. Conforme o @bfavaretto mencionou é só colocar o v-model no select e na propriedade data setar os elementos que se quer selecionar:

var app = new Vue({
  el: '#app',
  data: {
    selected: ['A','B']
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <select v-model="selected" multiple>
    <option disabled value="">Selecione</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selecionados: {{ selected }}</span>
</div>

1
  • 1
    Obrigada por responder moço. A resposta do @bfavaretto ja tinha me ajudado. Eu vou só colocar a minha resposta como correta, pq vou dar mais detalhes de acordo com o meu caso. Mas obrigada por deixar a resposta dele registrada na pergunta. ^^ Commented 18/10/2018 às 19:51
1

Depois das seguintes respostas do @bfavaretto:

Use conforme o exemplo do manual (segundo exemplo para selects): https://v2.vuejs.org/v2/guide/forms.html#Select

Precisa de um atributo v-model=seumodelo na tag select.

E no seu objeto data, um seumodelo: valor_selecionado.

E pela documentação do Vue.js:

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

Eu consegui resolver meu problema e ficou da seguinte forma no caso de multiple selects:

var setores = new Vue({
  el: '#v-for-negociossetores',
  data: {
     setoresselecionados: ["ghi", "mno"],
     setoresitens: {"countcats":16,"countsubcats":56,"catsubcatsdata":{"123":{"titulo":"Alimentos","descricao":"Padarias, Mercados, Restaurantes, Lanchonetes e etc.","subcats":{"345":{"codurl":"restaurantes","titulo":"Restaurantes","descricao":""}}},"abc":{"titulo":"Religiões","descricao":"","subcats":{"def":{"codurl":"igrejas","titulo":"Igrejas","descricao":""},"ghi":{"codurl":"religiao-casas","titulo":"Casas","descricao":""},"jkl":{"codurl":"religiao-templos","titulo":"Templos","descricao":""},"mno":{"codurl":"religiao-terreiros","titulo":"Terreiros","descricao":""}}}}}
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

 <div class="row clearfix">
     <div class="col-sm-3">
<div class="form-group" id="v-for-negociossetores">
  <select name="codsetores[]" class="form-control show-tick" multiple title="Setores" v-model="setoresselecionados">
      <optgroup v-for="(group, keygroup) in setoresitens.catsubcatsdata" v-bind:label="group.titulo">
          <option v-for="(option, keyoption) in group.subcats" v-bind:value="keyoption">
            {{ option.titulo }}
            </option>
        </optgroup>
    </select>
</div>
    </div>
  </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .