language-tools: 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.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 24 (15 by maintainers)

Commits related to this issue

feat: allow passing array to `experimentalModelPropName` ignore setting https://github.com/johnsoncodehk/volar/issues/1821#issuecomment-1276750142 — committed to vuejs/language-tools by johnsoncodehk 2 years ago

Most upvoted comments

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

hfhchan on Oct 14, 2022

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

last-partizan on Feb 24, 2023

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 on Feb 20, 2023

@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 on Oct 13, 2022

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

Fuzzyma on Oct 12, 2022

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

xmatthias on Oct 12, 2022

We have added new experimentalModelPropName setting in https://github.com/johnsoncodehk/volar/commit/5cad688875e76330c34e066920eca38d37281d84 so you can customize it.

johnsoncodehk on Oct 12, 2022