如何修復'錯誤無效分配目標'vue 3

Question

我正在使用 Vite 和 Quasar 構建應用程序。 我構建了一個子組件並定義了道具和數據並在模板上使用它們。 但是有這個錯誤：無效的分配目標

 <template> <QCheckbox v-model="(data.gps?.enable)" class="q-mt-none" label="GPS Only Tracking Enabled " /> </template> <script setup lang="ts"> import Vue from "vue"; import {defineComponent } from "vue"; import * as types from "../../../types"; const props = defineProps({ modalProps: Object as () => types.Itarget }); const defaults = { gps: props.modalProps?.gps, }; let data = ref(_.cloneDeep(defaults)); </script>

在這里，“gps”是 object，如下所示： gps: { enable: true, perform?: 'Normal', distance?: 33 }

如果我在 v-model 上使用 'data.gps?.enable'，就會發生錯誤。 如何解決這個問題？？

Answer 1

當您為data賦值時，組件尚未安裝（或 beforeMounted），因此組件此時不知道 props 的值。

你應該只在創建hooks中分配變量

onBeforeMount(() => {
    defaults = {
        gps: props.modalProps?.gps,
    };
    data.value = _.cloneDeep(defaults)
})

如果您想更安全，可以在模板中添加一個v-if並檢查該值是否存在

<QCheckbox v-if="data.gps" .... >

更好的是：道具的默認值

const props = withDefaults(defineProps<{
    modalProps: Object as () => types.Itarget
}>(), {
    modalProps: { enable: false, perform: '', distance: null }
})