vue combines v-for and input to implement the multi-select list checkbox function

Can be used in Vuev-forInstructions combine data binding to implement multiple-select lists. The following are the specific steps:

1. HTML structure

<div >
  <ul>
    <li v-for="item in items" :key="">
      <input type="checkbox" v-model="selectedItems" :value="item">
      {{  }}
    </li>
  </ul>
</div>

In the above code, usev-forLoop traversalitemsArray, generate one for each element<li>Label. Each<li>The tag contains a check box and the corresponding text content. Check boxv-modelBind toselectedItemsArray, used to store selected items.

2. Vue example

new Vue({
  el: '#app',
  data: {
    items: [
      { id: 1, name: 'Option 1' },
      { id: 2, name: 'Option 2' },
      { id: 3, name: 'Option 3' }
    ],
    selectedItems: []
  }
});

In the Vue instance, theitemsarray as raw data, andselectedItemsArrays are used to store selected items.

In this way, when the user checks the check box, the corresponding item will be added toselectedItemsIn the array, it will be removed from the array when unchecked.

Code example

template

<div class="list">
      <div class="car-item" v-for="item in carList" :key="" >
         <input  class="checkbox" type="checkbox" :value="item" @change="carSelectListChange" v-model="carSelectList"/>
         <div class="name">{{}}</div>
      </div>
    </div>

js

<script>
export default {
  name: "index",
  data(){
    return{
      // Vehicle table data      carList: [],
      carSelectList:[],
    }
  },
  methods:{
    carSelectListChange(){
      ()
    }
  }
}
</script>

This is the article about vue combining v-for and input to implement multi-select checkbox. For more related vue multi-select checkbox content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!