New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Radio button throws "Uncaught TypeError: this.checked.includes is not a function" #623

Closed
wsw70 opened this Issue Jul 3, 2017 · 16 comments

Comments

Projects
None yet
3 participants
@wsw70

wsw70 commented Jul 3, 2017

I tried (https://codepen.io/WoJWoJ/pen/YQLqjG) the simplest radio button (includes per the documentation):

<div id="root">
  <b-form-checkbox v-model="selected">something</b-form-checkbox>
  <div>
    The checkbox is selected: {{selected}}
  </div>
</div>
new Vue ({
  el: "#root",
  data: {
    selected: true
  }
})

The output is

something
The checkbox is selected: {{selected}}

and the Chrome DevTools show

vue.min.js:6 Uncaught TypeError: this.checked.includes is not a function
    at a.isChecked (form-checkbox.vue:43)
    at no.get (vue.min.js:7)
    at no.evaluate (vue.min.js:7)
    at a.isChecked (vue.min.js:6)
    at a.render (form-checkbox.vue:24)
    at a.n._render (vue.min.js:6)
    at a.<anonymous> (vue.min.js:6)
    at no.get (vue.min.js:7)
    at new no (vue.min.js:7)
    at a.e._mount (vue.min.js:6)
@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 3, 2017

Which Bootstrap-Vue version are you using? v0.17.1?

@wsw70

This comment has been minimized.

wsw70 commented Jul 3, 2017

@tmorehouse: I wanted to add this information (also to my previous bug) but I do not know how to find out which version is used. I included the files per the documentation:

<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 3, 2017

OK, you are using the latest (which is v0.17.1)

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 3, 2017

This should be fixed in the latest master, which will be in release v0.18.0

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 4, 2017

A current quick workaround is to use the babel polyfil on the client.

@sushain97

This comment has been minimized.

sushain97 commented Jul 4, 2017

I'm also encountering this problem (with checkboxes) but Babel polyfill doesn't fix it unfortunately :(

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 4, 2017

The current issue is with Array.prototype.includes, which is not available in all browsers.

Release v.0.18.0 should be available in the next couple of days which uses an alternate method to emulate includes

@sushain97

This comment has been minimized.

sushain97 commented Jul 4, 2017

@tmorehouse

The current issue is with Array.prototype.includes, which is not available in all browsers.

Hm, I'm not in such a browser:

[].includes
function includes() { [native code] }

(using Chrome 59)

Using the Chrome debugger, I get that this.checked is false rather than an Array, hence the problem. My usage is:

<b-form-fieldset horizontal label="&nbsp;" :feedback="fieldErrors('closed')" :state="fieldState('closed')">
    <b-form-checkbox v-model="closed" class="text-left">Closed</b-form-input>
</b-form-fieldset>

with

 data: () => ({
    // unrelated stuff
    closed: false,
}),

Using closed: [false], instead fixes the problem.

Perhaps I'm using <b-form-checkbox> wrong? I've only been using Vue for a couple days :) Thanks for your help!

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 4, 2017

What v-bind variable type are you providing to checkbox?

If it is an array it should return an array (assuming multiple checkboxes bound to the same variable)., if it is scalar (boolean or string) it should return the single value (assuming only one check box bound to the variable).

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 4, 2017

We're hoping to make b-form-checkbox similar to b-form-radio, where you can provide an array of "options" to create a series of checkboxes. But that features probably wont be available until release 0.19.0 or 0.20.0

@sushain97

This comment has been minimized.

sushain97 commented Jul 4, 2017

What v-bind variable type are you providing to checkbox?

I may be misunderstanding your question but it is not a boolean from my above snippet since data.closed is false and v-model="closed"?

assuming only one check box bound to the variable

Indeed, there is only one check box on my page in general.

tmorehouse added a commit that referenced this issue Jul 4, 2017

fix(form-radio): isChecked to work with arrays & non-arrays.
Fix for issue  #623

make isChecked computed prop check for array (multiple checks bound to same v-model) or non-array (single checkbox bound to v-model)
@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 4, 2017

OK, I think I have found the issue.

@sushain97

This comment has been minimized.

sushain97 commented Jul 4, 2017

@tmorehouse thanks! I'll yarn add master here after your PR gets merged.

tmorehouse added a commit that referenced this issue Jul 4, 2017

fix(form-radio): isChecked to work with arrays & non-arrays. (#629)
* fix(form-radio): isChecked to work with arrays & non-arrays.

Fix for issue  #623

make isChecked computed prop check for array (multiple checks bound to same v-model) or non-array (single checkbox bound to v-model)

* [form-checkbox] Documentation update
@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 4, 2017

@sushain97 The PR has been merged into master, so give it a whirl.

@tmorehouse

This comment has been minimized.

Member

tmorehouse commented Jul 5, 2017

@sushain97 @wsw70

Release v0.18..0 is now available (latest), and this issue should be resolved.

@tmorehouse tmorehouse closed this Jul 5, 2017

@sushain97

This comment has been minimized.

sushain97 commented Jul 5, 2017

I can verify that it is once again working as expected. Thanks for the help, @tmorehouse!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment