получение данных из родительского компонента vue.js: перекодировка проп,

Question

У меня ошибка в консоли, которая говорит:

Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита. Опора изменена: "sortType"

Мой корневой файл содержит API и функцию фильтра. Я отправляю эти данные на компоненты. Все было хорошо, пока я не добавил сортировку в filterList ().

Вот как я получаю sortType:

<div id="toprow">
       // slider codes...
        <select id="sortBox" v-model="sortData" v-on:change="filterList">
            <option value="">sorting</option>
            <option value="price">cheapest</option>
            <option value="created_at">newest</option>
        </select>
</div>


props:["filterList", "slider", "sliderX", "sortType"],
components: {
    vueSlider,
},
data() {
    return {
        sortData: this.sortType
    }
},
methods: {
    filterList(newType){
        this.$emit('update:type', newType)
    }
}

Ниже мой корневой файл ...

<app-toprow v-on:update:type="sortType = $event" :filterList="filterList" :slider="slider" :sliderX="sliderX" :sortType="sortType"></app-toprow>


data(){
    return {
        api: [],
        sortType:"",
    }
},
mounted(){
    axios.get("ajax").then(response => {
        this.api = response.data
    })
},
methods: {

},
computed: {
    filterList: function () {
        let filteredStates = this.api.filter((estate) => {
            return (this.keyword.length === 0 || estate.address.includes(this.keyword)) &&
            (this.rooms.length === 0 || this.rooms.includes(estate.rooms)) &&
            (this.regions.length === 0 || this.regions.includes(estate.region))});

            if(this.sortType == 'price') {
                filteredStates = filteredStates.sort((prev, curr) => prev.price - curr.price);
            }
            if(this.sortType == 'created_at') {
                filteredStates = filteredStates.sort((prev, curr) => Date.parse(curr.created_at) - Date.parse(prev.created_at));
            }

            return filteredStates;
    },
}
}

Хорошо, я что-то не так делаю, когда получаю sortType?

Answer 1

Вы передаете sortType как реквизит в дочерний компонент и одновременно изменяете его, используя v-model в select, таким образом получая эту ошибку.

Ваш дочерний компонент должен выглядеть примерно так:

<div id="toprow">
// slider codes...
    <select id="sortBox" v-model="selectedSort" v-on:change="filterList">
        <option value="">sorting</option>
        <option value="price">cheapest</option>
        <option value="created_at">newest</option>
     </select>
</div>


export default {
    data() => ({
        selectedSort: this.sortType
    })
    props:["filterList", "slider", "sliderX", "sortType"],
    components: {
        vueSlider,
    },
    methods: {
        filterList(newType){
            this.$emit('update:type', newType)
        }
    }
}

Теперь на v-on:change=filterList вы должны передать пользовательское событие родителю, которое уведомит его об изменении сортировки.

И что-то вроде этого на родителе:

<app-toprow v-on:update:type="sortType = $event" :filterList="filterList" :slider="slider" :sliderX="sliderX" :sortType="sortType"></app-toprow>

Соответствующий вопрос SO: https://stackoverflow.com/a/51722100/7482509 Соответствующие документы: https://vuejs.org/v2/guide/components-custom-events.html, https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

Answer 2

параметр выбора не имеет значения по умолчанию (при загрузке страницы это значение всегда равно sorting)? если да, вам не нужно использовать v-модель

, если оно имеет значение по умолчанию, попробуйте использовать :value вместо v-model и использовать реквизиты sortType в качестве значения.

также нельзя использовать одно и то же имя в filterList, попробуйте использовать другую переменную для функции.

<div id="toprow">
       // slider codes...
        <select id="sortBox" :value="sortType" v-on:change="change">
            <option value="">sorting</option>
            <option value="price">cheapest</option>
            <option value="created_at">newest</option>
        </select>
</div>

Функция изменения

export default {
    methods: {
        change(e){
            this.$emit('update:type', e.target.value)
        }
    }
}

на вашем родительском компоненте

<app-toprow v-on:update:type="sortType = $event" :filterList="filterList" :slider="slider" :sliderX="sliderX" :sortType="sortType"></app-toprow>

Answer 3

ИСПРАВЛЕНИЕ ДЛЯ КЛОНИРОВАННОГО [i] .apply

Vue 2 - Uncaught TypeError: cloned [i] .apply не является функцией в HTMLInputElement.invoker (vue.esm.js? 65d7: 1810) ошибка

в основном вы должны просто изменить имя реквизита filterList на другое

НОВЫЙ ОТВЕТ

вот ответ на обновление, проп filterList - это то же имя, что и в методе, который я считаю конфликтным.Кроме того, я думаю, что вам не нужно отправлять метод filterList от родителя к детям, потому что вы уже слушаете, если через update:type

methods: {
    filterList(event){
        // use the v-model reactive feature..
        this.$emit('update:type', this.sortData)
        // if you don't like this.sortData -> uncomment below
        // this.$emit('update:type', event.target.value)
    }
}

OLD

почему бы вам не использовать mounted() для инициализации sortData: this.sortType ...

data() {
    return {
        sortData: null
    }
},
mounted() {
  this.sortData = this.sortType
}

PS

Только моя теория ... Я не мог четко объяснить, почему это такпроисходит, но я думаю, что это потому, что vue реагирует, и все значения данных не должны иметь значения непосредственно из prop.потому что, если вы думаете об этом, если оно пришло от prop DIRECTLY , для его редактирования следует также отредактировать prop ..

но я действительно не знаю, почему он это делает, лучше спросите другоговремя.