Как из родителя сбросить :checked в дочерних компонентах?

Question

[Esm322]

Есть два дочерних компонента с фильтрами и кнопка сброса фильтров. Необходимо, чтобы при нажатии кнопки сбрасывался :checked с этих фильтров на начальные, но при нажатии кнопки :checked сохраняется на фильтрах. Как можно решить это?

Первый компонент с фильтрами:

<template>
  <div class="radio-list">
    <label class="radio-list__label" v-for="category in getCategories" :key="category.id">
      <input type="radio" class="radio-list__radio" name="price" :value="category.id"
      v-model="currentPriority"
      @change.prevent="filtered">
      <span class="radio-list__custom">
        {{ category.name }}
      </span>
    </label>
  </div>
</template>

<script>
import categoryTickets from '@/data/categoryTickets';

export default {
  data() {
    return {
      currentPriority: 0,
      currentTicketsPerList: 5,
      currentTicketsFlag: true,
    };
  },
  props: ['filterPriorities', 'ticketsPerList', 'ticketsFlag'],
  computed: {
    getCategories() {
      return categoryTickets;
    },
  },
  methods: {
    filtered() {
      this.$emit('update:filterPriorities', this.currentPriority);
      this.$emit('update:ticketsPerList', this.currentTicketsPerList);
      this.$emit('update:ticketsFlag', this.currentTicketsFlag);
    },
  },
};
</script>

Второй компонент с фильтрами:

<template>
  <aside class="filter">
    <form action="#" class="form filter__form" method="get">
      <fieldset class="form__block">
        <legend class="form__legend">
          Количество пересадок
        </legend>
        <ul class="check-list">
          <li class="check-list__item"
          v-for="category in filterStopsData" :key="category.id">
            <label class="check-list__label">
              <input type="checkbox" class="check-list__check"
              name="transfer" :value="category.id" v-model.number="currentStopsId"
              :checked="currentStopsId"
              @change.prevent="filtered">
              <span class="check-list__custom">
                {{ category.name }}
              </span>
            </label>
          </li>
        </ul>
      </fieldset>
    </form>
  </aside>
</template>

<script>
import categoryStops from '@/data/categoryStops';

export default {
  data() {
    return {
      currentStopsId: [1],
      currentTicketsPerList: 5,
      currentTicketsFlag: true,
    };
  },
  props: ['filterStops', 'ticketsPerList', 'ticketsFlag'],
  computed: {
    filterStopsData() {
      return categoryStops;
    },
  },
  methods: {
    filtered() {
      this.$emit('update:filterStops', this.currentStopsId);
      this.$emit('update:ticketsPerList', this.currentTicketsPerList);
      this.$emit('update:ticketsFlag', this.currentTicketsFlag);
    },
  },
};
</script>

Родительский компонент:

<template>
  <main class="content container">
    <div class="content__filter">
      <TicketsFilter
      v-model:filterStops="filterStopsIds"
      v-model:ticketsPerList="ticketsPerList"
      v-model:ticketsFlag="ticketsFlag"/>

      <button class="btn-reset-filters"
      @click.prevent="resetFilters"
      v-show="filterStopsIds.length > 1 || filterPriorities > 0">
        Сбросить фильтры
      </button>
    </div>

    <div class="content__list">
      <TicketsFilterTop
      v-model:filterPriorities="filterPriorities"
      v-model:ticketsPerList="ticketsPerList"
      v-model:ticketsFlag="ticketsFlag"/>

      <TicketsList
      v-model:tickets="ticketsData"/>
    </div>
  </main>
</template>

<script>
data() {
    return {
      filterStopsIds: [1],
      filterPriorities: 0,
      list: 1,
      ticketsPerList: 5,
      ticketsFlag: true,
    };
  },
methods: {
    resetFilters() {
      this.filterStopsIds = [1];
      this.filterPriorities = 0;
      this.ticketsPerList = 5;
      this.ticketsFlag = true;
    },
  },
</script>

Answer 1

[0xD34F]

Снизу вверх изменения отслеживаются, а сверху вниз - нет, состояние дочерних компонентов никак не зависит от родителя.

Вырезать обработчики события change и, соответственно, методы filtered; свойства currentPriority и currentStopsId сделать вычисляемыми - геттеры возвращают значение параметра, сеттеры отправляют новое значение родителю:

currentPriority: {
  get() {
    return this.filterPriorities;
  },
  set(val) {
    this.$emit('update:filterPriorities', val);
  },
},

currentStopsId: {
  get() {
    return this.filterStops;
  },
  set(val) {
    this.$emit('update:filterStops', val);
  },
},

Comments

[Esm322]

0xD34F Большое спасибо, всё заработало