如何修复'error invalid assignment target' vue 3

Question

我正在使用Vite和类星体构建应用程序。我建立了一个子组件，并定义了道具和数据，并在模板上使用它们。但是有这个错误:无效的分配目标

<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"它的对象是这样的:全球定位系统(gps): {启用:没错,执行?:"正常",距离?: 33}

如果我使用'data.gps?在v-model上启用'，发生错误。如何解决这个问题?

Answer 1

当你给data赋值时，组件还没有挂载(或未挂载)，所以组件此时不知道道具的值。

你应该只在创建hooks

时分配变量

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

如果你想更安全，你可以在你的模板中添加一个v-if，并检查值是否存在

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

更好:props的默认值

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