Почему не передаются данные через V-model?

Question

[B00mZ00m]

Пишу интернет магазин. В первом блоке кода я хочу привязать параметры фильтра товаров по цене и по категориям к формам input и select через v-model, чтобы с помощью этих параметров можно было фильтровать товары. Технически всё работает, я проверил через Vue Devtools, поизменял там переменные, товары меняются. Но вот почему через формы не хочет меняться, не привязывается?

<input class="form__input" type="text" name="min-price" V-model="filterPriceFrom">
              <span class="form__value">От</span>
            </label>
            <label class="form__label form__label--price">
              <input class="form__input" type="text" name="max-price"  V-model="filterPriceTo">
              <span class="form__value">До</span>
            </label>
          </fieldset>

          <fieldset class="form__block">
            <legend class="form__legend">Категория</legend>
            <label class="form__label form__label--select">
              <select class="form__select" type="text" name="category" v-model="FilterCategoryId">
                <option value="0">Все категории</option>
                <option :value="category.id" v-for="category in categories" :key="category.id">{{category.tittle}}</option>

Вот тут я передаю данные:

import categories from '../data/categories';  //Принимаем компонент с категориями товаров
export default {
    props:['FilterPriceFrom', 'FilterPriceTo', "FilterCategoryId"],
    computed:{
        categories(){   
            console.log(this.filterPriceFrom)    //Метод,передаюищй массив с категориями
            return categories;
        
        }
    }      
}

Answer 1

[0xD34F]

V-model="filterPriceFrom"

V-model="filterPriceTo"

props:['FilterPriceFrom', 'FilterPriceTo', "FilterCategoryId"],

Во-первых - серьёзно? Не видите разницы между большими и маленькими буквами? Это как? О том, что буквы бывают большие и маленькие, и что это не одно и то же, рассказывают в первом классе. Вам сколько лет, шесть? Пять?

Во-вторых, если бы вы составили себе труд открыть документацию, и прочесть, что там написано, то знали бы, что использовать v-model совместно с входными параметрами особого смысла нет. Потому что

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

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

Теперь, что делать.

Внутри компонента заменяете все v-model="параметр" на

:value="параметр" @input="$emit('update:параметр', $event.target.value)"

Снаружи - привязываете значения с использованием модификатора sync, если используете вторую версию vue.
Или, через v-model с указанием имени параметра, в случае vue 3.