input: JSX elements cannot have multiple attributes with the same name.

The recent update made my build crash. The Error is:

ts(17001): JSX elements cannot have multiple attributes with the same name.

It’s an input whose type is either “radio” or “checkbox” with a v-model and a value. Obviously, those 2 are allowed for these types. Only for other inputs, it would be a duplication

<input type="myType" v-model="foo" :value="bar" />

defineProps({
  myType: {
    type: String as PropType<'radio' | 'checkbox'>
  }
}

Volar seems to handle this case as a regular input even tho the type of type (haha) is radio or checkbox.

Possible Solution

If you know that your input is a checkbox or radiobox, dont use v-model. Instead use :checked="foo" and @change="foo = $event.target.checked"

That will solve the duplication because volar seems to handle v-model as :value instead of :checked.

[Fuzzyma]

@Fuzzyma you can use Show Virtual Files command to inspect for this.

Wow - I INSTANTLY found the issue when using this. In the virtual file, standalone attributes have the value (true). Unfortunetaly, using “true” instead of “null” didnt work either. Maybe because it is treated as a special value? I dont know. The empty string works and is fine for now

[Fuzzyma]

We could simply allow passing an array:

  "vueCompilerOptions": {
    "experimentalModelPropName": {
      "": {
        "input": [
          { "type": "radio" },
          { "hack-ignore-vmodel": "" }
        ]
      },
      "checked": {
        "input": { "type": "checkbox" }
      },
      "value": {
        "input": true,
        "textarea": true,
        "select": true
      }
    },
  },