Vuex - Computed property "searchPhrase" was assigned to but it has no setter

Question

I have a searchbar where user can get characters filtered by his input.

//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();
      }

I get state stored in characters.ts by @Getter from vuex-class and it gets its value with :value on input or v-model but it starts breaking instantly after I try to write something there.

Updated version due to LLai's answer(working): //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);
  }

possible duplicate of https://stackoverflow.com/a/46106438/7176268 — LLai, Apr 19 '21 at 03:45
I found it earlier but sadly it does resolve my issue in halfway. When I have done that, I get filtered characters from hardcoded value of 'resultSearching' but nothing happens when I write some value in input — Goteii, Apr 19 '21 at 12:29
Can you post your updated code? I don't see your setter for `searchPhrase` — LLai, Apr 19 '21 at 14:15
Should it be `set searchPhrase` instead of `set resultSearching`? — LLai, Apr 19 '21 at 15:48
Unfortunately not, its computed property and according to: https://blog.logrocket.com/how-to-write-a-vue-js-app-completely-in-typescript/ getter and setter have to have the same name. 'searchPhrase' is state which I get from the module characters.ts by @Getter from vuex-class — Goteii, Apr 19 '21 at 15:53
apologies, I am unfamiliar how vuex-class helpers affect this. But you'll need to find how to run a mutation during the v-model input (similar to this [js](https://dilshankelsen.com/v-model-with-vuex/#solution-2-two-way-computed-property) version). You could also split up your v-model to value + input similar to [this](https://dilshankelsen.com/v-model-with-vuex/#solution-1-modifying-v-model-logic) — LLai, Apr 19 '21 at 17:16

Vuex - Computed property "searchPhrase" was assigned to but it has no setter

0 Answers0