I am working with a component that has input parameters, and I am experimenting with using destructuring assignment on the properties object to reassign variables with different names:
<script setup lang="ts">
const { modelValue: isSelected, date1: inputDate1 } = defineProps({
modelValue: Boolean,
date1: String
})
console.log(isSelected)
const date1 = 'abc'
console.log(date1)
</script>
<template>
<div v-if="isSelected">Selected!</div>
</template>
In this piece of code, the variable modelValue is being reassigned to isSelected, and date1 is being reassigned to inputDate1.
However, there are two issues that arise from this code.
While editing at line const date1 = 'abc', an error occurs:
Duplicate key 'date1'. This may lead to name collision in the script or template tag. eslintvue/no-dupe-keys
This error seems to be inaccurate. If we modify the code as follows:
const date2 = 'abc'
console.log(date1)
We encounter another error when trying to log date1:
Cannot find name 'date1'. Did you mean 'date2'? ts(2552)
It appears that there is no other variable with the same name as date1. So why does the compiler flag it as a duplicate?
Additionally, during runtime, an exception or warning is thrown from the template:
[Vue warn]: Property "isSelected" was accessed during render but is not defined on instance.
However, the line:
console.log(isSelected)
correctly outputs either true or false.
If we remove the destructuring variable reassignment, the code runs without errors:
<script setup lang="ts">
const { modelValue } = defineProps({
modelValue: Boolean
})
console.log(modelValue)
</script>
<template>
<div v-if="modelValue">Selected!</div>
</template>
The output of console.log(modelValue) remains consistent.
console.log(typeof modelValue) returns boolean.
console.log(typeof isSelected) also returns boolean.
So what exactly is causing the issue here?