Maison > Questions et réponses > le corps du texte
Il s'agit de mon composant de recherche mais il génère une mutation inattendue dans l'erreur des accessoires "requête". J'ai essayé de cette façon mais j'obtiens toujours l'erreur.
<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>
C'est le caractère d'affichage qui utilise le composant pour rechercher et transmettre les données de la requête
<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>
Voici les erreurs que j'ai rencontrées
Erreur "query" propriété vue/no-mutating-props mutation inattendue
Erreur Mutation inattendue dans la propriété 'query' vue/no-mutating-props
Merci beaucoup pour votre aide
P粉5178143722024-01-01 15:50:58
Tu seras input
中的v-model
设置为query.name
,这意味着query
当您更改输入值时,它将发生变化。由于 query
un accessoire, donc tu ne peux pas faire ça.
P粉2162035452024-01-01 00:32:09
En plus de la réponse @Ian, une solution pour corriger cet avertissement consiste à utiliser get
创建一个compulated
属性,其值为query
prop 和 set
带有 emit
事件到父组件,以更新父组件的查询 prop,并且在 html
中,您可以使用 < code>计算的值而不是prop
values
<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>
Et dans le composant parent de ce composant vous pouvez mettre prop
传递为 v-model:prop="prop"
Par exemple
<child v-model:query="query" />