typescript 无法对“元素”执行“setAttribute”：“0”不是有效的属性名

7gyucuyw 于 2023-03-19 发布在 TypeScript

关注(0)|答案(1)|浏览(310)

我创建了一个非常简单的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)

任何备注，为什么我得到这个错误。谢谢你的帮助。

typescript

来源：https://stackoverflow.com/questions/70892167/failed-to-execute-setattribute-on-element-0-is-not-a-valid-attribute-name

1条答案

按热度按时间

zlwx9yxi1#

我遇到过这个问题，但是另一个原因。我想将属性和特性从子级传递到父级，所以我向子级添加了v-bind="[$attrs]"，这导致了错误

父版本

<template>
    <div>
        {{ name }}
    </div>
</template>
<script setup>
defineProps({
    name: {
        type: String
    }
});
</script>

子版本

<template>
    <Parent v-bind="[$attrs]" :class="{ 'active': modelValue }"/>
</template>
<script setup>
defineProps({
    modelValue: {
        type: Boolean,
        default: false
    }
})
</script>

然后我发现当一个组件是另一个组件的根时，属性和特性会自动传递。

赞(0）回复(0）举报 2023-03-19

我来回答

typescript 无法对“元素”执行“setAttribute”：“0”不是有效的属性名

1条答案

相关问题

热门标签

最新问答