How to select options from a select populated dynamically by vue.js?

Question

How to select options from a select populated dynamically by vue.js?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

I have a select in a form, and the items in this select are populated dynamically by vue.js.

My problem is that when I open a saved database in the database for editing on this form, I need to have some items selected according to what was saved before, and I do not know how to do this.

If someone knows about another library that looks like vue.js that is as light as it is easy to use, I also accept suggestions.

Here is my code:

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><divclass="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>

javascript vue.js

asked by anonymous 16.10.2018 / 07:44

2 answers

1

Just for the purposes of registering here on the site for future reference queries. As @bfavaretto mentioned, just put the v-model in the select and in the data property set the elements you want to select:

var app = new Vue({
  el: '#app',
  data: {
    selected: ['A','B']
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue"></script><divid="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>

17.10.2018 / 19:47

Filter jquery list with checkbox How to enable CORS for web page access from a different domain in Asp.Net MVC

score 0 · Accepted Answer

After the following responses from @bfavaretto :

Use the example in the manual (second example for selects):    link

You need a v-model = if-attribute attribute in the select tag.

And in your data object, a ifname: selected_value .

And by the Vue.js documentation:

<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' }
    ]
  }
})

I was able to solve my problem and it was as follows in the case of 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><divclass="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>