微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Vuex - 计算属性“searchPhrase”已分配给但没有设置器

如何解决Vuex - 计算属性“searchPhrase”已分配给但没有设置器

我有一个搜索栏,用户可以在其中获取按其输入过滤的字符。

//Dummy input to check if it works
    <input
  class="form-control"
  type="text"
  placeholder="Search"
  v-model="searchPhrase"
  
/>
<Character
  v-for="character in resultSearching"
  :key="character.id"
  :photo="character.image"
  :characterID="character.id"
  :name="character.name"
  :gender="character.gender"
  :species="character.species"
  :lastEpisode="character.episode[character.episode.length - 1].episode"
  :character="character"
  />
 </div>
 </template>


  <script lang="ts">
    import { Vue,Component } from "vue-property-decorator";
    import Character from "./Character.vue";
    import { CharactersApiI } from "@/models/models";
    import { Getter } from "vuex-class";
    @Component({
      components: {
        Character,},})
    export default class Characters extends Vue {
      @Getter("characters/getCharacters") characters!: CharactersApiI[];
      @Getter("characters/getLoading") loading!: boolean;
      @Getter("characters/getError") error!: boolean;
      @Getter("characters/getSearchPhrase") searchPhrase!: string;
      @Getter("characters/getHeaders") headers!: string[];
      get resultSearching(): any {
        return this.characters.filter((character) => {
          return character.name
            .toLowerCase()
            .match(this.searchPhrase.toLowerCase());
        });
      }
      set resultSearching(newValue: any) {
        this.searchPhrase = newValue.target.value.toLowerCase();
      }

我通过@Getter 从 vuex-class 获取存储在 characters.ts 中的状态,它通过输入或 v-model 上的 :value 获取它的值,但在我尝试在那里写东西后它立即开始崩溃。

由于 Llai 的回答而更新版本(有效): //characters.ts

 @Mutation 
  updateMessage(e: { target: {value: string}}) {
    this.searchPhrase = e.target.value;
  }

//characters.vue

export default class Characters extends Vue {
  @Getter("characters/getCharacters") characters!: CharactersApiI[];
  @Getter("characters/getSearchPhrase") searchPhrase!: string;
  @Mutation("characters/updateMessage") updateMessage!: (e: {
    target: { value: string };
  }) => void;
  get resultSearching(): CharactersApiI[] {
    return this.characters.filter((character) => {
      return character.name
        .toLowerCase()
        .match(this.searchPhrase.toLowerCase());
    });
  }
  handleInput(e: {target: {value: string}}) {
    this.updateMessage(e);
  }

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。