I am stuck at making a CheckBoxGroup with a prop array as v-model. I have read the vuejs guide: https://vuejs.org/v2/guide/forms.html#Checkbox which has the v-model array in the data of the same component, but it is obviously pretty useless if I want to make this component reusable and insert the v-model via props and for example check some of the boxes from "outside". So I tried following:
CheckBoxgroup.vue
<template>
<div>
<label v-for="day in allDays" :key="day">
<input v-model="checkedDays" type="checkbox" :value="day" />
<span></span>
</label>
<div>Checked days: </div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
@Component
export default class CheckBoxGroup extends Vue {
@Prop() checkedDays!: string[]
@Prop() allDays!: string[]
}
</script>
Index.vue
<template>
<div>
<checkbox-group :checked-days="checkedDays" :all-days="allDays" />
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import CheckboxGroup from './checkBoxGroup.vue'
@Component({
components: { CheckboxGroup },
})
export default class Index extends Vue {
// This list would usually come from an API
allDays = ['Monday', 'Tuesday', 'Wednesday']
checkedDays = ['Monday']
}
</script>
So the code is working almost fine, but I am getting
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders...
Is there any way around it? Any help would be appriciated.
Aucun commentaire:
Enregistrer un commentaire