如何解决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 举报,一经查实,本站将立刻删除。