Vue.js 意外突变

Question

这是我的搜索组件，但它引发了“查询”道具错误的意外突变，我尝试了这种方式，但仍然收到错误。

<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 发生意外突变

非常感谢您的帮助

Answer 1

您将input中的v-model设置为query.name，这意味着query当您更改输入值时，它将发生变化。由于 query 是一个 prop，因此您不能执行此操作。

Answer 2

除了@Ian回答之外，要修复此警告，一种解决方案是使用get创建一个compulated属性，其值为query prop 和 set 带有 emit 事件到父组件，以更新父组件的查询 prop，并且在 html 中，您可以使用 计算的值而不是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" />