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" />