Компонент флажка из привязки модели массива объектов - PullRequest
Новая
       2

Компонент флажка из привязки модели массива объектов

0 голосов
/ 30 марта 2020

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

Кнопка будет переключаться ON и OFF при нажатии (флажок checked)

Примечание: приведенный ниже код не работает, он дает undefined при нажатии на кнопку

enter image description here

<template>
  <label 
    v-for="(day, index) in days"
    :key="index"
    class="flex items-center justify-center border border-gray-500 rounded cursor-pointer py-2"
    :class="day.state ? 'text-white bg-gray-500' : 'text-gray-500 bg-white'"
    :for="`checked-${day.index}`"
  >
    <input
      :id="`checked-${ day.index }`"
      type="checkbox"
      class="absolute opacity-0 w-0 h-0"
      @click="check"
      v-model="selectedDays"
      :value="index"
    />
      {{ day.label }}
    </label> 
</template>

<script>
export default {
  inheritAttrs: false,
    data() {
    return {
      days: {
        Sunday: {
          label: 'Sun',
          state: true
        },
        Monday:  {
          label: 'Mon',
          state: false
        },
        Tuesday:  {
          label: 'Tue',
          state: false
        },
        Wednesday:  {
          label: 'Wed',
          state: false
        },
        Thursday:  {
          label: 'Thu',
          state: false
        },
        Friday:  {
          label: 'Fri',
          state: false
        },
        Saturday:  {
          label: 'Sat',
          state: false
        }
      },
      selectedDays: []
    }
  },
  methods: {
    clickToggle() {
      this.toggle(!this.state)
    },
    toggle(state) {
      this.state = state
    },
    check() {
      console.log(this.selectedDays);
    }
  }
}
</script>

Мои вопросы:

  • Как я могу привязать флажок к модели / моделям, чтобы я мог просто переключать это состояние модели при нажатии флажка?
  • Должен ли я использовать подход selectedDays или days может справиться со всем этим самостоятельно?

1 Ответ

0 голосов
/ 30 марта 2020

Событие не требуется. Смотрите мой пример, я работаю только с директивой v-модели.

Для selectedDays лучшим способом является вычисляемое свойство. Это лучшая практика и более легкая. 

<template>
  <div>
    <label
      v-for="(day, index) in days"
      :key="index"
      class="flex items-center justify-center border border-gray-500 rounded cursor-pointer py-2"
      :class="day.state ? 'text-white bg-gray-500' : 'text-gray-500 bg-white'"
    >
      <input type="checkbox" v-model="day.state" />
      {{ day.label }}
    </label>
    <div>{{ selectedDays }}</div>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  data() {
    return {
      days: {
        Sunday: { label: 'Sun', state: true },
        Monday: { label: 'Mon', state: false },
        Tuesday: { label: 'Tue', state: false },
        Wednesday: { label: 'Wed', state: false },
        Thursday: { label: 'Thu', state: false },
        Friday: { label: 'Fri', state: false },
        Saturday: { label: 'Sat', state: false },
      },
    };
  },
  computed: {
    selectedDays() {
      let result = [];
      for (let key in this.days) {
        if (this.days[key].state) {
          result.push(this.days[key]);
        }
      }
      return result;
    },
  },
};
</script>
...