Vue 组合 API 的返回语句上重复的键错误

Question

由于Vuetify对Vue 3的支持仍处于测试阶段，因此我尝试在Vue 2中使用Composition API。我是这样使用的：

<script>
import { defineComponent } from '@vue/composition-api'
import { computed, toRef } from 'vue'
import fetchOtherImages from 'some-library'
export default defineComponent({
name: 'PhotoGallery',
props: {
images: {
type: Array,
required: true
}
},
setup(props) {
const { images: imagesFromProps } = toRef(props)
const images = computed(() => [
...imagesFromProps.value.map(image => image.getUrl()),
...fetchOtherImages()
])
return { images }
},
})
</script>

问题是，它在return语句中抛出vue/no-dupe-keys。我这样做正确吗？我对整个Composition还不熟悉，Vue 2关于这个主题的文档也于事无补。

Answer 1

https://eslint.vuejs.org/rules/no-dupe-keys.html

存在名为images的data(由setup返回(和名为images的prop，这违反了规则vue/no-dupe-keys。

您可以重命名setup:返回的数据

setup(props) {
const { images: imagesFromProps } = toRef(props)
const images = computed(() => [
...imagesFromProps.value.map(image => image.getUrl()),
...fetchOtherImages()
])
return { imagesComputed: images }
},

顺便说一句，强烈推荐Vue 2.7，而不是Vue 2.6+@vue/composition-api！