Dies ist meine Suchkomponente, aber sie löst eine unerwartete Mutation des „Query“-Props-Fehlers aus. Ich habe es auf diese Weise versucht, erhalte aber immer noch den Fehler.
<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>
Dies ist das Ansichtszeichen, das die Komponente zum Suchen und Übergeben der Abfragedaten verwendet
<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>
Das sind die Fehler, auf die ich gestoßen bin
Fehler Unerwartete Mutation in der „Query“-Eigenschaft vue/no-mutating-props
Fehler Unerwartete Mutation in der „Query“-Eigenschaft vue/no-mutating-props
Vielen Dank für Ihre Hilfe
您将
input
中的v-model
设置为query.name
,这意味着query
当您更改输入值时,它将发生变化。由于query
是一个 prop,因此您不能执行此操作。除了@Ian回答之外,要修复此警告,一种解决方案是使用
get
创建一个compulated
属性,其值为query
prop 和set
带有emit
事件到父组件,以更新父组件的查询 prop,并且在html
中,您可以使用 计算的值而不是prop
值并且在该组件的父组件中,您可以将
prop
传递为v-model:prop="prop"
例如