Question

意外突变 Vue.js

2022-10-19

1759

javascript vue.js vuejs3

这是我的 Searchcomponent，但是它引发了“查询” prop 的意外突变错误，我尝试了这种方法但仍然收到错误。

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

这是使用组件搜索并传递查询数据的视图 Characters

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

这些是我收到的错误

错误“查询” prop vue/no-mutating-props 的意外突变

非常感谢您的帮助

Answer 1

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

Answer 2

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