我创建了一个非常简单的 Vue 3 组件:
<template>
<input type="text" :value="value" >
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
props:{
value: {type: String, default: ''}
}
});
</script>
使用下面的 HTML,我尝试在浏览器中呈现该组件:
<div id="app">
{{message}}
<my-input></my-input>
</div>
这可以正常工作,但是当我尝试将 value
属性传递给此组件时,它会失败:
<my-input :value="message"></my-input>
这是错误,我进入浏览器控制台:
Uncaught DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
at patchAttr (https://unpkg.com/vue@next:9333:18)
at patchProp (https://unpkg.com/vue@next:9539:11)
at mountElement (https://unpkg.com/vue@next:6051:27)
at processElement (https://unpkg.com/vue@next:6024:15)
at patch (https://unpkg.com/vue@next:5944:23)
at ReactiveEffect.componentUpdateFn [as fn] (https://unpkg.com/vue@next:6484:23)
at ReactiveEffect.run (https://unpkg.com/vue@next:580:31)
at setupRenderEffect (https://unpkg.com/vue@next:6603:11)
at mountComponent (https://unpkg.com/vue@next:6386:11)
at processComponent (https://unpkg.com/vue@next:6344:19)
任何评论为什么我会收到此错误。感谢您的帮助。
最佳答案
我遇到了这个问题,但由于另一个原因。我想将属性和属性从子级传递给父级,因此我向子级添加了 v-bind="[$attrs]",这导致了错误
Parent.vue
<template>
<div>
{{ name }}
</div>
</template>
<script setup>
defineProps({
name: {
type: String
}
});
</script>
Child.vue
<template>
<Parent v-bind="[$attrs]" :class="{ 'active': modelValue }"/>
</template>
<script setup>
defineProps({
modelValue: {
type: Boolean,
default: false
}
})
</script>
然后我发现,当一个组件是另一个组件的根时,特性和属性会自动传递。
关于javascript - 无法在 'setAttribute' : 'Element' is not a valid attribute name 上执行 '0',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70892167/