vuejs vuex中直接修改props的问题

Question

我在这个网络应用程序中工作，试图构建一个搜索栏过滤器，它允许我通过编写我想要的任何内容来执行我自己的查询（如果 API 包含数据），但总是抛出我同样的错误：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "Search".

我正在查看您的一些回复，试图将它们应用到我的案例中，但它们给了我一个巨大的错误，最糟糕的是，这是我的部分代码，我的原始代码：

  <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 控制台中出现此错误，因此尽管正在工作但不是 'correct' 不知何故。关于这段代码我应该改进的地方有什么建议吗？

Answer 1

错误是因为您在输入（SearchBar 组件）上使用 v-model 修改 Search 属性

改为这样做：

<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（父项拥有数据 - 它在 data() 中有 Search）
当 Child 正在渲染并需要输入初始值时，它调用 getter（get() 方法）returns Search prop[=38 的值=]
当用户更改输入的内容时，Vue 会执行类似 searchPhrase = new value 的操作，这会依次调用 setter
Setter 发出具有新值的事件作为事件负载
父侦听器获取一个新值并将其分配给 Search 数据变量 (@receivingSelfSearch='autoSearch')
Vue 检测到 Search 已更改并更新子组件，将子组件中的 Search prop 更新为新值

vuejs vuex中直接修改props的问题

Problems with modifying props directly in vuejs vuex

javascript

vue.js

properties

vuex

v-model