[Vuejs]-How to dynamically add IDs in checkboxes with vue?

by

1👍

✅

Note: This refers to the last snippet shown in the question, as the OP changed the question after this answer.

Assuming the server side code & fetching the data works, you don’t need to create the input element by another script, you can simple create it like you do with the <td> elements in the v-for loop:

<tr v-for="(student, index) in students">
  <input type="checkbox" :id="student.email"
  <td>{{student.email}}</td>
  <td>{{student.lastname}}</td>
</tr>

Note the : (or v-bind: as the verbose option) before the id attribute, this is used to bind data to attributes. See https://v2.vuejs.org/v2/guide/syntax.html#Attributes

Edit: Added working example: https://codesandbox.io/s/stack-overflow-q-59488184-x8m0w

Edit: You also need to bind the result to the vue instance. this in .then does not point to your component. Use a closure for that:

 mounted() {
    let vm = this;
    axios
      .get("..."
      .then(response => {
        vm.students = response.data;
        console.log(vm.students);
      })
👤wwerner

Leave a comment