bootstrap-vue: b-form-checkbox assign is not a function

Describe the bug

in Vue 3 + vue-compat. When setting v-model on a b-form-checkbox component results in a runtime error when clicking the switch. Does not occur with a standard input field.

Steps to reproduce the bug

use b-form-checkbox in a view or component
set v-model to a boolean property
click switch/checkbox
Error

Screenshot 2023-11-03 at 12 29 29 pm

Expected behavior

No runtime Error.

Versions

Libraries:

BootstrapVue: 2.23.1
Bootstrap: 4.6.2
Vue: 3.3.7

Environment:

Device: Macbook Pro
OS: MacOS Sonoma 14.0
Browser: Chrome
Version: Version 118.0.5993.117 (Official Build) (arm64)

Demo link

minimal repro on stackblitz

https://stackblitz.com/edit/bootstrap-vue-with-compat-fsfglw?file=components%2FHelloBootstrap.vue

Additional context

in my application, this crashes UI with ‘Uncaught runtime Errors’… in the stackblitz demo, only logs error to console.

When I debug down into the vue.js code, it seems that this call…

const vModelCheckbox = {
...
const assign = el[assignKey]; //yields undefined
....
assign(getCheckboxValue(el, checked)); //assign is not a function as it is undefined (boom)

where: assignKey is Symbol(_assign), this yields undefined, creating the error later

It may be related to this (https://github.com/vuejs/core/pull/4121)

About this issue

Original URL
State: open
Created 8 months ago
Reactions: 6
Comments: 16

Commits related to this issue

chore(compat) assign hack needs to use symbol #7181, #7182 — committed to JavascriptMick/bootstrap-vue by MichaelDausmann 8 months ago
#2490: downloaded to vue 3.3.4 to avoid this bug https://github.com/bootstrap-vue/bootstrap-vue/issues/7182 — committed to NationalSecurityAgency/skills-service by deleted user 6 months ago

Most upvoted comments

I’m getting this same error using Vue 3.3.4.

@helenezspeer You need to make sure that you are not using ^3.3.4 but rather 3.3.4 and the same thing for @vue/compat

jpfleischer on Dec 20, 2023

fwiw, my workaround for now is to replace b-form-checkbox with…

        <div class="custom-control custom-switch ml-2">
          <input
            v-model="myModelVariable"
            class="custom-control-input"
            id="my-id"
            type="checkbox"
            value="true" /><label class="custom-control-label" for="my-id"
            >My Label</label
          >
        </div>

JavascriptMick on Nov 14, 2023

We are seeing this exact error during our upgrade to Vue 3.3.7. In addition, we’re seeing Uncaught TypeError: el[assignKey] is not a function when changing the selected option in a dropdown. If we downgrade to 3.3.4 the error is not thrown.

ryaneastabrook on Nov 6, 2023