Vue JS CheckBoxGroup с массивом проп в качестве v-модели - PullRequest
Новая
       106

Vue JS CheckBoxGroup с массивом проп в качестве v-модели

0 голосов
/ 23 февраля 2020

Я застрял в создании CheckBoxGroup с массивом проп в качестве v-модели. Я прочитал руководство vuejs: https://vuejs.org/v2/guide/forms.html#Checkbox, в котором есть массив v-модели в данных того же компонента, но, очевидно, это бесполезно, если я хочу сделать этот компонент многоразовым и вставить v-модель с помощью реквизита и, например, установите флажки «снаружи». Поэтому я попробовал следующее:

CheckBoxgroup. vue

<template>
  <div>
    <label v-for="day in allDays" :key="day">
      <input v-model="checkedDays" type="checkbox" :value="day" />
      <span>{{ day }}</span>
    </label>
    <div>Checked days: {{ checkedDays }}</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>

Таким образом, код работает почти нормально, но я получаю

[Vue warn]: избегайте прямого изменения свойства, так как значение будет перезаписываться всякий раз, когда родительский компонент перерисовывает ...

Есть ли способ обойти это? Любая помощь будет оценена.

Ответы [ 2 ]

0 голосов
/ 23 февраля 2020

Спасибо за ответ, мне действительно удалось решить эту проблему также с помощью v-модели, но это выглядит несколько странно и не очень многократно для случаев, когда данные вводятся из внешних моделей. Так что я буду go с вашим решением.

0 голосов
/ 23 февраля 2020

вы не можете изменить родительское состояние напрямую от дочерних, однако вы можете передать событие от дочернего к родительскому, чтобы изменить его оттуда, как показано ниже: 

Vue.component('check-box-group', {
  template: `
    <div>
      <label v-for="day in allDays" :key="day">
        <input 
          v-model="checkedDays" 
          :value="day" 
          @click="$emit('update-checked-days', { newCheckedDay: day })"
          type="checkbox" 
        />
        <span>{{ day }}</span>
      </label>
      <div>Checked days: {{ checkedDays }}</div>
    </div>
  `,
  props: {
    checkedDays: {
      type: Array, default: () => ([])
    },
    allDays: {
      type: Array, default: () => ([])
    },
  }
})

new Vue({
  el: "#app",
  data() {
    return {
      allDays: ['Monday', 'Tuesday', 'Wednesday'],

      checkedDays: ['Monday']
    }
  },
  methods: {
    HandleUpdateCheckedDays({newCheckedDay}) {
      const indexOfCheckedDay = this.checkedDays.findIndex(checkedDay => checkedDay === newCheckedDay)

      if (indexOfCheckedDay === -1) { // if not exists then add to checkedDays
        this.checkedDays.push(newCheckedDay)
      } else {
        this.checkedDays = this.checkedDays.filter((_, i) => i !== indexOfCheckedDay)
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

<div id="app">
  <check-box-group 
    :checked-days="checkedDays" 
    :all-days="allDays" 
    @update-checked-days="HandleUpdateCheckedDays"
  />
</div>

note : помните, что состав класса TS устарел.

...