Vue 3(Nuxt 3)中通过对象键的模板循环中输入值的TypeScript错误

csga3l58 于 2023-02-20 发布在 TypeScript

关注(0)|答案(2)|浏览(250)

我目前正在将一个Nuxt应用从版本2迁移到版本3，同时也将TypeScript引入到堆栈中。在我的一个组件模板中，我循环通过一组未知的对象键来创建一个单选框或复选框输入列表。

<template
    v-for="(optionValue, optionKey) in options"
    :key="`filter-option-${optionKey}`"
>
    <input
        :id="optionKey.toString()"
        v-model="selection"
        class="filter-options-input visually-hidden"
        :value="optionKey"
        :name="name"
        :type="type"
    >
    <label
        :for="optionKey.toString()"
        :class="['filter-options-label', `is-${type}`]"
    >
        {{ optionValue }}
    </label>
</template>

代码创建了预期的必填字段，但我无法修复的是<input> s :value属性上的以下TypeScript错误：
一个对象文本不能有多个同名的属性。ts（1117）
在这里，它抱怨道：

options的类型定义如下所示：

type Option = {
    [key: string]: string;
}

实际数据如下所示：

{
    "portrait":"Hochformat",
    "landscape":"Querformat",
    "square":"Quadratisch"
}

或者像这样：

{
    "akane-akane": "Akane, Akane",
    "anita-staud": "Staud, Anita",
    "anne-marie-chatelier": "Chatelier, Anne-Marie",
    "anneli-schuetz": "Schütz, Anneli",
    "annette-gundermann": "Gundermann, Annette",
    "arno-mohr": "Mohr, Arno",
    ...
}

TypeScript在这里想告诉我什么？我如何修复错误消息？
以下是Codesandbox中的复制：https://codesandbox.io/p/sandbox/agitated-mendeleev-ypytew?file=%2Fcomponents%2Finput-list.vue&selection=%5B%7B%22endColumn%22%3A14%2C%22endLineNumber%22%3A34%2C%22startColumn%22%3A14%2C%22startLineNumber%22%3A34%7D%5D

typescript

来源：https://stackoverflow.com/questions/75452800/typescript-error-on-input-value-in-template-loop-through-object-keys-in-vue-3-n

2条答案

按热度按时间

ioekq8ef1#

问题是：

与错误地将v-model键入为InputHTMLAttributes.value的别名有关。根据文档，v-model在
<input type="checkbox"> * 和 * <input type="radio"> * 使用 * checked * 属性 * ...
...这与value属性无关。
我最初认为它来自nuxt（因为它是您链接的沙箱中唯一的依赖项，而我在新的vue项目中没有看到相同的依赖项），所以我在他们的repo上打开了this ticket。
然而，错误输入的罪魁祸首是Volar，它是Codesandbox（很可能是您的IDE）使用的IDE扩展。
如果你想进一步调查此事，请随时向Volar提出问题，关于他们的回购协议。

修复：

1.禁用掌侧
1.使用v-bind语法避开该问题：

<input
  :id="optionKey.toString()"
  v-model="selection"
  class="filter-options-input visually-hidden"
  v-bind="{ value: optionKey, name, type }"
/>

1.使用模板忽略它忽略：

<input
  ...
  v-model="selection"
  ...
  :data-foo="/* ts-ignore */"
  :value="optionKey"
  ...
/>

赞(0）回复(0）举报 2023-02-20

mrfwxfqh2#

事实证明，问题不在代码中，而是在我的IDE中。我使用的Volar扩展有一个不准确的v-model prop类型定义。这个问题现在在vuejs/language-tools的1.1.3版本中得到了修复（2023/2/18）。

赞(0）回复(0）举报 2023-02-20

我来回答

Vue 3(Nuxt 3)中通过对象键的模板循环中输入值的TypeScript错误

2条答案

相关问题

热门标签

最新问答