Vue Form父組件和多選按鈕input checkbox之間的數據雙向綁定數據共享

Vue CLI方式

• 父組件傳數據給子組件，在子組件中改變數據的一些屬性後父組件對應的數據也一同改變。
• 子組件和父組件之間的數據雙向綁定

父組件

//Form.vue

<template>
<div class="show">
  <h2>This is form elements-input type checkbox</h2>
<div class="quiz-checkbox">
  <h2>quiz checkbox</h2>
  <checkbox v-for="(item) in checkboxQuizList" v-model="item.isChecked" :key="item.key" :checkboxName="checkboxNamQquiz" :checkboxJson="item" @change="checkboxChangeA" @selfChangeA="selfCheckboxChangeA"></checkbox>
  <h2>quiz checkbox B</h2>
  <CheckboxB v-for="item in checkboxQuizListB" :checkboxID="item.key" :key="item.key" :checkboxName="checkboxNamQquizB" :checkboxJson="item"></CheckboxB>
  
 </div>
 <input type="button" value="提交答案" v-on:click="getCheckboxData()"/>
 </div>
 
</template>

<script>
import ButtonCounter from '../components/button/ButtonCounter.vue';
import checkbox from '../components/form/checkbox.vue';
import CheckboxB from '../components/form/CheckboxB.vue';
export default{
  name: "Show",
  mounted() {
    window.console.log(this.checkboxQuizList);
  },
  data() {
    return{
    checkboxNamQquiz: 'quiz',
    checkboxNamQquizB: 'quizB',
    isChecked: true,
	checkboxQuizList: [
      {'title':'A','isChecked':false,'key':'keyA1'},
      {'title':'B','isChecked':false,'key':'keyA2'},
      {'title':'C','isChecked':false,'key':'keyA3'}
	],
	checkboxQuizListB: [
      {'title':'A','isChecked':false,'key':'keyB1'},
      {'title':'B','isChecked':false,'key':'keyB2'},
      {'title':'C','isChecked':false,'key':'keyB3'},
      {'title':'D','isChecked':false,'key':'keyB4'}
	]
    }
  },
	components:{
		ButtonCounter,
		checkbox,
		CheckboxB
	},
	methods:{
		clickNow: function(){
			window.console.log(22222,this);
		},
    getCheckboxData: function(){
      window.console.log(this.checkboxQuizList,"<br/>");
    },
    checkboxChangeA: function(e){
      window.console.log(3334,e);
    },
    selfCheckboxChangeA: function(e){
      window.console.log(3335,e)
    }
	}
}
</script>

<style>
</style>

子組件

Checkbox.bue

<template>
  <label>
  <input type="checkbox" :name="checkboxName" @change="checkboxChange($event)">{{checkboxJson.title}}
  </label>
</template>

<script>
export default{
  name: "formCheckbox",
  model:{
      prop: 'checked',
      event: 'change'
  },
  props:{
    checked: Boolean,
    checkboxJson: {
      type: Object
    },
    checkboxID:{
      type: String,
      default: "",
    },
    checkboxName:{
      type: String,
      default:""
    }
  },
  data(){
    return{
      countClick: 0,
    }
  },
  mounted(){
    window.console.log(333333,this.checkboxJson);
  },
  methods:{
    checkboxClick: function(){
      this.countClick++;
      this.$emit('clickNow', this.countClick)
	},
	checkboxChange: function(e){
    window.console.log(22223,e.target.checked);
    this.$emit('change', e.target.checked)
   // this.checkboxJson.isChecked = e.target.checked
   // this.$emit('selfChangeA',e.target.checked)
	}
  }
}
</script>

<style scoped lang="less">
.checkbox-div{position: relative; height: 30px;}
.checkbox-div{
	input[type='checkbox']{ opacity: 0; width: 20px; height: 20px;}
	label{width: 20px; height: 20px; border: 1px solid red; position: absolute; left: 0px;font-size: 16px; text-align: center;}
	input:checked+label{border: 1px solid green;}
	input:checked+label:after{content: "√";color:red;}
}
</style>

子組件CheckboxB

<template>
  <label>
  <input type="checkbox" :id="checkboxID" :name="checkboxName" v-on:change="checkboxChange($event)">{{checkboxJson.title}}
  </label>
</template>
<script>
export default{
  name: "formCheckbox",
  props:{
    checkboxJson: {
      type: Object
    },
    checkboxID:{
      type: String,
      default: "",
    },
    checkboxName:{
      type: String,
      default:""
    }
  },
  data(){
    return{
    }
  },
  mounted(){
    console.log('this is checkboxJson',this.checkboxJson);
  },
  methods:{
    checkboxChange: function(e){
      this.checkboxJson.isChecked = e.target.checked
      //this.$emit('change', this.checkboxJson.isChecked)
    }
    
  }
}
</script>

<style scoped lang="less">
.checkbox-div{position: relative; height: 30px;}
.checkbox-div{
	input[type='checkbox']{ opacity: 0; width: 20px; height: 20px;}
	label{width: 20px; height: 20px; border: 1px solid red; position: absolute; left: 0px;font-size: 16px; text-align: center;}
	input:checked+label{border: 1px solid green;}
	input:checked+label:after{content: "√";color:red;}
}
</style>