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

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

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

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?

@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

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

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

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