这是我的搜索组件,但它引发了“查询”道具错误的意外突变,我尝试了这种方式,但仍然收到错误。
<template> <div class="searchbar"> <input type="text" v-model="query.name" // this is the error class="input" placeholder="Search" /> <div v-if="query.name.length > 3"> <select v-model="query.status" class="select"> // This is the error <option value="alive">Alive</option> <option value="dead">Dead</option> <option value="unknown">Unknown</option> </select> </div> </div> </template> <script> export default { props: { query: String } }; </script> <style scoped> .input { font-family: Roboto; font-size: 16px; height: 56px; border-radius: 8px; width: 326px; padding: 16px 48px; line-height: 150%; border: 1px solid rgba(0, 0, 0, 0.5); background: url("../assets/search.svg") no-repeat scroll 10px center; outline: none; } .input::placeholder { line-height: 150%; color: rgba(0, 0, 0, 0.5); } .select { font-family: Roboto; line-height: 19px; color: rgba(0, 0, 0, 0.6); font-size: 16px; height: 56px; border-radius: 8px; width: 240px; padding-left: 14px; border: 1px solid rgba(0, 0, 0, 0.5); outline: none; background: url("../assets/arrow-up-down.svg") no-repeat scroll 90% center; } select { -webkit-appearance: none; -moz-appearance: none; text-indent: 1px; text-overflow: ""; } .searchbar { display: flex; gap: 20px; margin: 16px auto 61px; } </style>
这是视图字符,它使用组件搜索并传递查询数据
<template> <div class="container"> <img src="../assets/characterLogo.svg" alt="logo-character" class="logo" /> <CharacterSearchBar :query="query" /> <p v-if="query.name.length < 4"> Enter 4 characters </p> <div class="cards-container" v-if="query.name.length > 3"> <CharacterCard v-for="character in results" :key="character.id" :character="character" /> </div> <div v-if="error" class="not-found"> Sorry, dont have any result </div> <div v-if="query.name.length > 3"> <button @click="loadMore" class="more-button">Load More</button> </div> </div> </template> <script> import CharacterCard from "../components/CharacterCard.vue"; import CharacterSearchBar from "../components/CharacterSearchBar.vue"; import getData from "../composables/getData"; import { APISettings } from "../api/config"; import { watchEffect } from "vue"; import getFilterResults from "../composables/getFilterResults"; export default { components: { CharacterCard, CharacterSearchBar }, setup() { const { charactersUrl } = APISettings; const { results, info, loadMore } = getData(charactersUrl); const { fetchQuery, query, error } = getFilterResults( charactersUrl, results, info ); watchEffect(loadMore) watchEffect(fetchQuery); return { results, info, loadMore, query, error}; }, }; </script>
这些是我遇到的错误
错误“query”属性 vue/no-mutating-props 发生意外突变
错误“query”属性 vue/no-mutating-props 发生意外突变
非常感谢您的帮助
P粉5178143722024-01-01 15:50:58
您将input
中的v-model
设置为query.name
,这意味着query
当您更改输入值时,它将发生变化。由于 query
是一个 prop,因此您不能执行此操作。
P粉2162035452024-01-01 00:32:09
除了@Ian回答之外,要修复此警告,一种解决方案是使用get
创建一个compulated
属性,其值为query
prop 和 set
带有 emit
事件到父组件,以更新父组件的查询 prop,并且在 html
中,您可以使用 < code>计算的值而不是prop
值
<template> <div class="searchbar"> <input type="text" v-model="compQuery.name" // this is the error class="input" placeholder="Search" /> <div v-if="query.name.length > 3"> <select v-model="compQuery.status" class="select"> // This is the error <option value="alive">Alive</option> <option value="dead">Dead</option> <option value="unknown">Unknown</option> </select> </div> </div> </template> <script> export default { props: { query: String }, computed: { compQuery: { get () { return this.query }, set (value) { this.$emit('update:query', value) }, }, }, }; </script>
并且在该组件的父组件中,您可以将 prop
传递为 v-model:prop="prop"
例如
<child v-model:query="query" />