Проблемы с модификацией реквизита непосредственно в vuejs vuex
Я работаю в этом веб-приложении, пытаясь построить фильтр панели поиска, который позволяет мне делать свой собственный запрос от написания всего, что я хочу (если API содержит данные), но выдает мне всегда одну и ту же ошибку:
Избегайте прямого изменения prop, так как значение будет перезаписываться всякий раз, когда родительский компонент повторно визуализируется. Вместо этого используйте данные или вычисленное свойство, основанное на значении prop. Опора мутировала: "Поиск".
Я смотрел на некоторые из ваших ответов, пытаясь применить их к моему случаю, но они дают мне огромную ошибку, превратившуюся в худшую, вот часть моего кода, мой оригинальный:
<v-container>
<input class='input'
@input='sendingSelfSearch'
placeholder="write words for search"
type="text"
v-model="Search"
/>
</v-container>
</template>
<script>
export default {
name: "SearchBar",
props: {
SearchBar:Object,
Search:String
},
methods:{
sendingSelfSearch(){
this.$emit('receivingSelfSearch',this.Search)
}
}
};
</script>
И в этой второй части я получаю этот компонент из' Search '(компонент) в 'Home' (просмотр):
<template>
<div class="home">
<img class='body' src='../assets/alli.jpg'/>
<SearchBar @receivingSelfSearch='autoSearch' v-bind:Search='Search'></SearchBar>...
</template>
<script>
import {mapGetters} from 'vuex'
import Filters from '../components/Filters.vue'
import SearchBar from '../components/SearchBar.vue'
export default {
name: 'home',
components: {
Filters,
SearchBar
},
data(){
return {
listCountries:'',
listEvents:'',
listModalities:'',
Search:'',
}
},
methods:{
autoSearch(text){
this.Search=text
},
},
computed:{
autoSearchFilter(){
some code
}
...результат запроса показывает, но в то же время у меня есть эта ошибка в консоли devtool, таким образом, несмотря на то, что она работает, это не "правильно" как-то. Любые предложения относительно этого кода, где я должен улучшить, пожалуйста?
Ответы - Проблемы с модификацией реквизита непосредственно в vuejs vuex / Problems with modifying props directly in vuejs vuex

04.01.2020 06:26:54
Ошибка заключается в том, что вы изменяете Search
систему с помощью v-model
на входе (SearchBar
Как работает использование вычисляемого свойства для <v-container>
<input class='input'
placeholder="write words for search"
type="text"
v-model="searchPhrase"
/>
</v-container>
</template>
<script>
export default {
name: "SearchBar",
props: {
Search: String
},
computed: {
searchPhrase: {
get() { return this.Search }
set(val) { this.$emit('receivingSelfSearch', val) }
}
}
};
</script>
:
- Ребенок получает
v-model
от родителя (родитель владеет данными - у него естьSearch
вSearch
) - Когда дочерний объект рендеринга нуждается в начальном значении для ввода, он вызывает метод getter (
data()
), который возвращает значениеget()
prop - Когда пользователь изменяет содержимое ввода, Vue будет делать что-то вроде
Search
, что в свою очередь вызывает setter - Сеттер выдает событие с новым значением в качестве полезной нагрузки события
- Родительский прослушиватель получает новое значение и присваивает его
searchPhrase = new value
) - Vue обнаруживает
Search
изменен и обновляет дочерний компонент, обновляяпоисковую систему внутри дочернего элемента до нового значения



SearchBar
события receivingSelfSearch и назначение нового значения в receivingSelfSearch
строку данных).




