Duplicate 'value' attribute for <input type="radio"> when using it with v-model

[2-5]

The following TypeScript error is thrown:

error TS17001: JSX elements cannot have multiple attributes with the same name.
                 value="One"
                 ~~~~~

for the following template (inspired from https://vuejs.org/guide/essentials/forms.html#radio):

<template>
  <input v-model="picked" type="radio" value="One" />
  <input v-model="checked" type="checkbox" value="Two" />
</template>

<script setup lang="ts">
import { ref } from "vue"

const picked = ref([])
const checked = ref([])
</script>

Volar special-cases the <input type="checkbox"> case which works, but not the <input type="radio">:

https://github.com/johnsoncodehk/volar/blob/master/packages/vue-language-core/src/generators/template.ts#L2000

function getModelValuePropName(node: CompilerDOM.ElementNode, vueVersion: number) {
  const tag = node.tag;
  const typeAttr = node.props.find(prop => prop.type === CompilerDOM.NodeTypes.ATTRIBUTE && prop.name === 'type');
  const type = typeAttr?.value?.content;

// >>>
  if (tag === 'input' && type === 'checkbox')
    return 'checked';
// >>>>>

  if (
    tag === 'input' ||
    tag === 'textarea' ||
    tag === 'select' ||
    vueVersion < 3
  ) return 'value';

  return 'modelValue';
}

[melan0802]

Got same error, when using v-model and value at same time like this:

<n-checkbox v-model="auth" label="root" value="root" />

vue: 2.7
volar: 0.40.2/0.40.3/0.40.4

tsconfig.json:

{
  "compilerOptions": {
    // ... other options omitted
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "esnext"
    ],
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "allowJs": true,
    "sourceMap": true,
    "noImplicitReturns": true,
    "target": "es5",
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [ "src/*" ]
    },
    "jsx": "preserve"
  },
  "vueCompilerOptions": {
    "target": 2.7
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.vue"
  ]
}

Temporary solution: Downgrade to 0.40.1.

[mklein994]

Permalink to the specific lines @2-5 was referring to, since the reference moved: https://github.com/johnsoncodehk/volar/blob/018d260d7bd00b06def4bcd600bf8d1e9347a7ec/packages/vue-language-core/src/generators/template.ts#L2033-L2034

[tekkimariani]

Got this error when using the checkbox like this:

<input 
    type="checkbox"
    class="checkbox"
    v-model="form.show_password"
    :checked="form.show_password"
    name="show_password"
>

The ':checked' is marked as the problem.

[jarrettmeyer]

Hack solution, use @change instead of v-model.

[LinusBorg]

Got this error when using the checkbox like this:

<input 
    type="checkbox"
    class="checkbox"
    v-model="form.show_password"
    :checked="form.show_password"
    name="show_password"
>

The ':checked' is marked as the problem.

Well, this is just invalid. v-model already handles checked, so you should not add it yourself.