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

Asked

Viewed 1,466 times

1

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

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

If anyone knows another Vue.js-like library that is as light and easier to use, I also accept suggestions.

Just follow 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>

 <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>

javascript vue.js

  • Our Samantha, it was very confusing that your question. If I understand what you want is popular select with the Database data is this?

  • 1

    Use as an example of the manual (second example for selects): https://vuejs.org/v2/guide/forms.html#Select

  • @Leandrade sorry, I do not know how to explain better in the question. But it is not that not, popular the select I already get that is what this in the question. But the select population comes from a json file. The q need is when open a registered record in the database, which in addition to popular select as I already do, that it already leaves selected the items that were previously saved. I don’t know if I can explain it right.

  • @bfavaretto I looked at the documentation, that’s how I managed to get to where I posted. But I still don’t know how to leave some selected items. I didn’t see any similar example in the documentation, or at least I didn’t understand if there was something talking about it there. Can you help me with some more practical explanation? please

  • 2

    You need an attribute v-model=seumodelo in the select tag. and in its object data, one seumodelo: valor_selecionado. I think that’s it.

  • @bfavaretto Ahh ok, I will try to understand more about the attribute v-model, thanks for the explanation, I will try here and Jaja I talk if it worked out, thank you.

  • @bfavaretto Ahh worked, that’s right, obliged aa. Want to make a more detailed answer so I choose your answer?? Or do I answer myself and mention you in the answer?

Show 2 more comments

2 answers

1

Only for purposes of leaving registered here on the website for inquiries on future issues. As the @bfavaretto mentioned just put the v-model in select and property data 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>

<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

    Thank you for answering, young man. @bfavaretto’s reply had already helped me. I will just put my answer as correct, because I will give more details according to my case. But thank you for leaving his answer on record in the question. ^^

1


After the following responses from @bfavaretto:

Use according to the example in the manual (second example for selects): https://vuejs.org/v2/guide/forms.html#Select

You need an attribute v-model=your model on the tag select.

And in its object date, one your model: selected value.

And for the documentation of 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' }
    ]
  }
})

I was able to solve my problem and 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>

 <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>

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.