問題
我試圖確定一個字串是否在 Vues v-if 指令中包含一些子字串。當我這樣做時，我收到以下錯誤：
TypeError: $options.language.includes is not a function
我正在使用 Vue、Vuex 和 Ionic。
其中語言是計算屬性：
computed: {
language() {
return this.$store.getters.getLanguage;
}
}
v-if 看起來是這樣的：
<ion-label v-if="language.includes('en')">Play as guest</ion-label>
這是 store 中計算屬性的樣子：
state: {
language: String,
}
突變：
mutations: {
setLanguage(state, payload) {
state.language = payload;
}
}
行動：
actions: {
setLanguage(state, language) {
state.commit('setLanguage', language);
}
}
吸氣劑：
getters: {
getLanguage: state => state.language,
}
并且語言是在 Ionic 鉤子 ionViewWillEnter 中設定的：
async ionViewWillEnter() {
const info = await Device.getLanguageCode();
this.$store.dispatch('setLanguage', info.value);
}
當組件路由即將影片進入視圖時觸發
解決方案的嘗試
- 我已經使用 typeof 確保計算屬性是字串型別
<ion-label v-if="typeof language === 'string'">Play as guest</ion-label>
顯示的標簽意味著計算屬性是一個字串
- 我試過使用 indexOf
language.indexOf('en') > -1
但這導致：
TypeError: $options.language.indexOf is not a function
現在我不太確定如何進行。我需要能夠檢查計算的屬性字串是否在 v-if 指令中包含一些子字串。我怎樣才能做到這一點？感謝您的幫助！
uj5u.com熱心網友回復：
您可能會收到此錯誤，因為language回傳未定義的 null，您可以通過在 null 時回傳空字串來捕獲此錯誤：
computed: {
language() {
return this.$store.getters.getLanguage ?? ""; // will return `""` when this.$store... is null or undefined
}
}
uj5u.com熱心網友回復：
錯誤的解釋是language已定義（否則錯誤將是關于缺少includes屬性）但沒有includes方法。這意味著它是一個物件或一個函式。
它的typeof language === 'string'條件在某些時候為真意味著值從非字串變為字串。
問題是：
state: {
language: String,
}
除非這段代碼屬于使用特殊邏輯來檢查 prop 型別并接受原始型別的建構式的組件 props，否則這意味著它state.language被分配了String建構式，即一個函式。
它應該是：
language: null,
或者
language: '',
或者
language: 'en',
請注意，未初始化的值可能需要特殊處理，這null是可取的，因為它指定一個值未初始化并導致明確明確的錯誤。在這種情況下，它將是：
無法讀取 null 的屬性“包含”
將邏輯放入模板是一種不好的做法。這使得除錯和處理值變得更加困難，還可能導致密集計算的性能問題。這是計算屬性的用例：
computed: {
language() {
return this.$store.getters.getLanguage;
},
isDefaultLanguage() {
return !this.language || this.language.includes('en');
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/339672.html
標籤：javascript Vue.js