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

[Fuzzyma]

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.

[xmatthias]

Unfortunately, this issue seems to persist - and is also still happening on 0.40.10.

[hanskusters]

last version that does not give this error in my project is v0.40.1

[xmatthias]

Seems to be still problematic in v0.40.13

[nTodorovski]

Same problem in my project v0.40.7.

[hfhchan]

This also happens when using <b-form-checkbox> instead of <input type=checkbox>.

[Fuzzyma]

I edited my entry post to show a possible solution

[johnsoncodehk]

We have added new experimentalModelPropName setting in 5cad688 so you can customize it.

[Fuzzyma]

@johnsoncodehk your fix seems to be vue 2 related. I am not sure how this solves the issue. I just updated volar and the configuration setting doesnt seem to exist. I wouldnt know what to put there anyway to solve the issue.

Can you elaborate?

[johnsoncodehk]

This is not VSCode setting, it's from vueCompilerOptions property in tsconfig.

[Fuzzyma]

@johnsoncodehk thx, and how do I use it? I cannot find any documnentation and intellisense is not helping me

[xmatthias]

in my case (bootstrap-vue radio button), the following worked.

 "experimentalModelPropName": {
      "": {
        "b-form-radio": true
      },
    }

for your case - i think the following should work

 "experimentalModelPropName": {
      "": {
        "input": {"type": "myType"}
      },
    }

[johnsoncodehk]

@Fuzzyma look to your code I guess type is dynamic, you can try this hack way:

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

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

 "experimentalModelPropName": {
      "": {
        "input": {"hack-ignore-vmodel": ""}
      },
    }

[Fuzzyma]

@johnsoncodehk the error goes away if i just write this:

  "vueCompilerOptions": {
    "experimentalModelPropName": {
      
    },
  },

But i assume thats because I overwrite the defaults.
If I add the defaults however, I dont know how to add your hack:

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

The above does not work. How can I add multtiple optiosn for the "ignore" case?

[johnsoncodehk]

The above does not work. How can I add multtiple optiosn for the "ignore" case?

You can't, this is design mistake of experimentalModelPropName, I will check how to change experimentalModelPropName to handle this case tomorrow. (Please let me know if you have idea)

[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
      }
    },
  },

[johnsoncodehk]

@Fuzzyma please try v1.0.7

[Fuzzyma]

It works like a charm @johnsoncodehk . Thank you very much!

I also found out that you can use { "hack-ignore-vmodel": null } and then just use a standalone attribute in the template like <input hack-ignpre-v-model type="myType" ...>

[johnsoncodehk]

I also found out that you can use { "hack-ignore-vmodel": null } and then just use a standalone attribute in the template like <input hack-ignpre-v-model type="myType" ...>

Good to know. :)

I cannot find any documnentation and intellisense is not helping me

If anyone wants to add documentation for it PR is much appreciated. (I plan to do but not these days)

[Fuzzyma]

I also found out that you can use { "hack-ignore-vmodel": null } and then just use a standalone attribute in the template like <input hack-ignpre-v-model type="myType" ...>

Good to know. :)

I might be wrong on this one. When I opened vs-code later, it showed as wrong again so maybe my types just didnt update properly :D

[johnsoncodehk]

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

[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

[hfhchan]

For anyone using BootstrapVue, the following reference is provided. In tsconfig.json, add the following code into "vueCompilerOptions":

    "experimentalModelPropName": {
      "": {
        "input": { "type": "radio" },
        "b-form-radio": true
      },
      "checked": {
        "input": { "type": "checkbox" },
        "b-form-checkbox": true
      },
      "value": {
        "input": true,
        "textarea": true,
        "select": true
      }
    }

[last-partizan]

I cannot get this to work with vue@2.7.14 and vue-tsc@1.1.5.

Here's my minimal reproduction:
https://github.com/last-partizan/vue-examples/tree/1f960defcec69d0154176d4cf8c170b498e31410

Any ideas?

[last-partizan]

Found my problem, this setting is sensitive to component name casing, i needet to add BFormCheckbox and BFormRadio to suggested config.