問題
我有一些代碼可以從 Vuex 商店獲取搜索查詢。我正在使用計算屬性來獲取搜索查詢，然后將其系結到輸入欄位的 v-model。我希望能夠通過輸入欄位編輯/更改搜索詞，然后提交新的搜索查詢，然后執行新的搜索查詢。
但是由于計算屬性是“只讀”，當我更改輸入欄位中的搜索查詢時，它不會更新搜索查詢，并導致警告：
vendor.js:16674 Write operation failed: computed value is readonly
題
如何從 Vuex 獲取搜索查詢、填充輸入欄位、更改/更新它，然后提交更改后的查詢？我試圖computed為組合 API找到一個setter，但找不到。
有任何想法嗎？還是我應該看看另一種方法？
下面是代碼
<template>
<form role="search"
aria-label="Sitewide"
@submit.prevent="submitSearch"
autocomplete="off">
<input type="text" v-model="searchQuery" />
<button type="button" v-on:click="submitSearch">Search</button>
</form>
</template>
<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
name: "ProductSearchBox",
setup() {
const store = useStore();
const searchQuery = computed(() => store.getters["search/getFiltersSearchTerm"]);
const submitSearch = () => {
store.dispatch('search/performSearch', searchQuery);
}
return {
searchQuery,
submitSearch
}
}
}
</script>
uj5u.com熱心網友回復：
這聽起來更像是watch.
const searchQuery = ref('');
watch(
() => store.getters["search/getFiltersSearchTerm"],
(term) => searchQuery.value = term
);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/353951.html