Проблемы с модификацией реквизита непосредственно в vuejs vuex

04.01.2020 04:59:36 Просмотров 85 Источник

Я работаю в этом веб-приложении, пытаясь построить фильтр панели поиска, который позволяет мне делать свой собственный запрос от написания всего, что я хочу (если 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

Является ответом!

Michal Levý

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изменен и обновляет дочерний компонент, обновляя поисковую систему внутри дочернего элемента до нового значения

Источник

https://stackoverflow.com/questions/59591373/problems-with-modifying-props-directly-in-vuejs-vuex/59592116#comment105349974_59592116

но тогда я отменю свое прежнее "это".$emit ('receivingSelfSearch', this.Поиск)" вообще?

Источник

https://stackoverflow.com/questions/59591373/problems-with-modifying-props-directly-in-vuejs-vuex/59592116#comment105350003_59592116

должен ли я получить этот результат в моем представлении, используя val вместо поиска, связывая его (val) с поиском возврата данных, который я уже объявил в этом экземпляре?

Источник

https://stackoverflow.com/questions/59591373/problems-with-modifying-props-directly-in-vuejs-vuex/59592116#comment105350118_59592116

Используйте мой код в вашем SearchBarсобытия receivingSelfSearch и назначение нового значения в receivingSelfSearchстроку данных).

Источник

https://stackoverflow.com/questions/59591373/problems-with-modifying-props-directly-in-vuejs-vuex/59592116#comment105350180_59592116

я просто @input=searchPhrase, я имею в виду тот же V - образный вычислительный метод , чтобы иметь возможность передать его в мой домашний вид, но продолжает давать мне ошибку...теперь говорит:Не могу прочитать свойство 'apply' из undefined"...хотя все равно строка поиска дает мне результаты по запросу

Источник

https://stackoverflow.com/questions/59591373/problems-with-modifying-props-directly-in-vuejs-vuex/59592116#comment105350335_59592116

шаблон> <v-container> <input class="input" @input="sendingSelfSearch" placeholder="write words for search" type="text" v-model="sendingSelfSearch" /> </v-container> </template> <script>

Источник