Vue-Vuex Bootstrap Checkbox

Basic example of the vuex-persistedstate plugin

by Andres Abadia

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css">
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue-icons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<div id="app">
   <div>
      <div 
         v-for="productId in productIds"
         :key="`1${productId}`">
         <label>
         <input type="checkbox" :value="productId" v-model="selectedProductIds"/>
         Product {{productId}}
         </label>
      </div>
      <hr>
      <div v-for="productId in productIds"
         :key="`2${productId}`">
         <label
            >
         <input type="checkbox" :value="productId" v-model="selectedProductIds"/>
         Product {{productId}}
         </label>
      </div>
      <div>selectedProductIds: <strong>{{ selectedProductIds }}</strong></div>
   </div>
</div>

CSS

#app {
  padding: 20px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
  	productIds: [1, 2, 3],
    selectedProductIds: [1, 2],
  },
  computed: {
    computedSelectedProductIds: {
      get: function () {
      	return this.selectedProductIds;
        //return this.$store.state.status;
      },
      set: function (value) {
      console.log(value)
      	this.selectedProductIds = _.uniq([
          ...[1, 2],
          ...value
      	]);
      }
    }
  }
});