"An object literal cannot have multiple properties with the same name" error with b-form-checkbox

[hfhchan]

The error An object literal cannot have multiple properties with the same name happens with <b-form-checkbox> (bootstrap-vue) when having both v-model and :value defined. I think this is because v-model is desugaring into :value, but in this case it should be using checked.

There's a check for this for the native input elements input[type=checkbox] and input[type=radio] in volar/vue-language-tools/vue-language-core/src/generators/template.ts#1794.

[danielwaltz]

I am seeing this error too. I'm using the <v-checkbox /> component from vuetify@2 in a vue@2.7 project.

Not sure how that would be fixed to be honest. Volar doesn't really have a way of knowing when a custom component should be treated like a native checkbox element. Maybe if there was a way to add @ts-expect-error or @ts-ignore in the template that could at least serve to suppress the error.

It may just need to wait until these component libraries implement types for their components. 😞 If I find a workaround I will share it here!

[johnsoncodehk]

See #1821 (comment)

[hfhchan]

Is there a way to make vue-tsc respect the vueCompilerOptions setting as well?

[hfhchan]

Ok stupid me, I updated volar in VSCode but forgot to update vue-tsc in package.json

[lngtai001]

I am seeing this error too. I'm using the <v-checkbox /> component from vuetify@2 in a vue@2.7 project.

Not sure how that would be fixed to be honest. Volar doesn't really have a way of knowing when a custom component should be treated like a native checkbox element. Maybe if there was a way to add @ts-expect-error or @ts-ignore in the template that could at least serve to suppress the error.

It may just need to wait until these component libraries implement types for their components. 😞 If I find a workaround I will share it here!

Did you get it working? We are also using vuetify 2 and vue 2.7, and getting this error with volar.

[danielwaltz]

Unfortunately no, I never did get it working with the new compiler option.

What I ended up doing was wrap the checkbox component in my own component, and instead of using the value prop directly I renamed it to selectedValue. It's working, but I'm also not the biggest fan of it because you need to remember to use this wrapping component (unless you're already wrapping all your vuetify components anyway of course).

// AppCheckbox.vue

<script lang="ts">
export default { inheritAttrs: false };
</script>

<script setup lang="ts">
defineProps<{ selectedValue: unknown }>();
</script>

<template>
  <v-checkbox
    :value="selectedValue"
    :input-value="$attrs.value"
    v-bind="$attrs"
    v-on="$listeners"
    @change="$listeners.input"
  />
</template>

[pfouche]

Did you get it working? We are also using vuetify 2 and vue 2.7, and getting this error with volar.

We're using vuetify 2 and vue 2.7 as well, and adding the following piece of configuration in the vueCompilerOptions section of our ts config file fixed the issue:

"experimentalModelPropName": {
      "checked": {
        "input": {
          "type": "checkbox"
        },
        "v-checkbox": true
      }
    }

I'm not sure I really understand the magic though...