JSFiddle - React, Tailwind, and code Playground

by eligiv

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue-icons.js"></script>
<div id="app">
  <div>
    <b-form-datepicker
    v-model='date'
    >
    </b-form-datepicker>
    <b-table
    :items='items'
    >
      <template #cell(check)="{ item }">
        <b-form-checkbox
        v-model="item.check"                 
        >
        </b-form-checkbox>
      </template>
    </b-table>
  </div>
</div>

CSS

body { padding: 1rem; }

JavaScript

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
      	date: '2021-04-25',
        items: [
          {id: 1, check: true,},
          {id: 2, check: true,},
          {id: 3, check: true,},
        ]
      }
    },
    watch: {
    	date() {
      	this.items.forEach((value, k) => {
        	this.$set(this.items[k], 'check', true);
        });
        
        console.log(this.items)
      }
    }
  })
}