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>
v-model=seumodelo
na tag select. E no seu objetodata
, umseumodelo: valor_selecionado
. Acho que é só isso.