Почему не работает двусторонняя привязка с родительским компонентом во vue2?

Question

[Esm322]

Подскажите, пожалуйста, есть родительский компонент MainPage, где есть фильтр по разным категориям. Я делаю привязку путём "v-model:price-from=''filterPriceFrom", но в props в дочернем компоненте ProductFilter они имеют значение undefined и привязка не срабатывает по ивенту doSubmit. Родителький компонентMainPage:

<ProductFilter
v-model:price-from="filterPriceFrom"
v-model:price-to="filterPriceTo"
v-model:category-id="filterCategoryId"
v-model:material-id="filterMaterialId"
v-model:season-id="filterSeasonId"/>

<script>
import ProductsList from '@/components/ProductsList.vue';
import BasePagination from '@/components/BasePagination.vue';
import ProductFilter from '@/components/ProductFilter.vue';
import { mapActions, mapState } from 'vuex';

export default {
  data() {
    return {
      page: 1,
      productsPerPage: 5,

      filterPriceFrom: 0,
      filterPriceTo: 0,
      filterCategoryId: 0,
      filterSeasonId: [],
      filterMaterialId: [],
    };
  },
  components: {
    ProductsList,
    BasePagination,
    ProductFilter,
  },
methods: {
    ...mapActions(['loadProducts']),
    loadProduct() {
      this.loadProducts({
        page: this.page,
        limit: this.productsPerPage,
        minPrice: this.filterPriceFrom,
        maxPrice: this.filterPriceTo,
        categoryIds: this.filterCategoryId,
        materialIds: this.filterMaterialId,
        seasonIds: this.filterSeasonId,
        colorIds: this.filterColorId,
      });
    },
  },
watch: {
    page() {
      this.loadProduct();
    },
    filterPriceFrom() {
      this.loadProduct();
    },
    filterPriceTo() {
      this.loadProduct();
    },
    filterCategoryId() {
      this.loadProduct();
    },
    filterMaterialId() {
      this.loadProduct();
    },
    filterSeasonId() {
      this.loadProduct();
    },
  },

Дочерний компонент ProductFilter:

<form class="filter__form form" action="#" method="get"
    @submit.prevent="doSubmit">
      <fieldset class="form__block">
        <legend class="form__legend">Цена</legend>
        <label class="form__label form__label--price">
          <input class="form__input" type="text" name="min-price"
          v-model.number="currentPriceFrom">
          <span class="form__value">От</span>
        </label>
        <label class="form__label form__label--price">
          <input class="form__input" type="text" name="max-price"
          v-model.number="currentPriceTo">
          <span class="form__value">До</span>
        </label>
      </fieldset>

<script>
import { mapActions, mapState } from 'vuex';

export default {
  data() {
    return {
      currentPriceFrom: 0,
      currentPriceTo: 0,
      currentCategoryId: 0,
      currentSeasonId: [],
      currentMaterialId: [],
    };
  },
  props: ['priceFrom', 'priceTo', 'categoryId', 'materialId', 'seasonId'],
  computed: {
    ...mapState(['categoriesData', 'materialsData', 'seasonsData']),
  },
  methods: {
    ...mapActions(['loadCategories', 'loadMaterials', 'loadSeasons']),
    doSubmit() {
      this.$emit('update:priceFrom', this.currentPriceFrom);
      this.$emit('update:priceTo', this.currentPriceTo);
      this.$emit('update:categoryId', this.currentCategoryId);
      this.$emit('update:materialId', this.currentMaterialId);
      this.$emit('update:seasonId', this.currentSeasonId);
    },
    doReset() {
      this.$emit('update:priceFrom', 0);
      this.$emit('update:priceTo', 0);
      this.$emit('update:categoryId', 0);
      this.$emit('update:materialId', []);
      this.$emit('update:seasonId', []);
    },
  },
  created() {
    this.loadCategories();
    this.loadMaterials();
    this.loadSeasons();
  },
};
</script>

Проверял в версии vue3, всё работает

Answer 1

[0xD34F]

Потому что возможность указывать аргумент для v-model появилась в третьей версии vue.

Вместо v-model используйте sync.

Comments

[Esm322]

Тогда он пишет, что sync для v-bind устарел
error '.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead vue/no-deprecated-v-bind-sync

[0xD34F]

Esm322, кто "он"? Предлагаю вам разобраться в этом вопросе, погуглив сообщение об ошибке.

[Esm322]

всё заработало, спасибо. Линтер показывал ошибку, потому что в плагине в расширениях eslintrc.js стояла версия vue3