lundi 23 septembre 2019

V-for and Checking Checkboxes Initially

I've been looking around SO and Google for quite a while now, while i found some working examples i cannot seem to grasp the logic behind it and adapt it to my code so here I am in need of help:

I want: to have checkboxes initially set (i get the Id, Name, whatever i want from the database and send it to vue as a prop)

                <li v-for="(value,index) in usertypes" :key="index">
              <label>
                <input
                  v-model="user.preference"
                  :id="'short_desc_'+index"
                  type="checkbox"
                  :value="value['short_desc_'+locale]"
                />
                <span class="label-text"></span>
              </label>
            </li>

the code above renders the checkboxes , they are bound to user.preferences whereas the data looks like this:

 data: function() {
return {
  user: {
    usertype: {},
    preference: [],
    languages: [],
    ...
  },

also this is how my data which determines what should be checked looks like

console.log(this.userdataobject.pre_preferences)
//Returns: (2)[{...},{...}]

//Unfolded:
-> 0: {id: ...,name:...}
-> 1: {id: ...,name:...}

so i have access to the ids and names and, if i want, ill put a checked attribute in there from my backend, no problem. But I cannot seem to grasp the logic behind the "set something initially checked".. Do i have to rename my model to something.selected and create an array, push stuff into this array then? is selected as an array a vue specific thing? (question because this is what ive seen so far on my research) or how does it work. Thanks in advance.

Edit: I think i'm on to something just as i finished sending in this post. But i'll be happy to receive explanations because I might be wrong. If i manage to solve this problem myself, i'll send in an answer.




Aucun commentaire:

Enregistrer un commentaire