CODEWITHSUNDEEP
javascriptcheckboxbootstrap-vue
Nubtacular
Nubtacular

Reputation: 1397

Bootstrap-Vue Switch Style Checkbox: doesn't show custom control toggle

I'm reading through the documentation here for switch style checkboxes: https://bootstrap-vue.org/docs/components/form-checkbox

When I use the example HTML/JS in my own application, I can get the html to render but it doesn't show the actual switch toggle, like so:

https://jsfiddle.net/Lz5tcpqb/2/

<template>
  <div>
    <b-form-checkbox v-model="checked" name="check-button" switch>
      Switch Checkbox <b>(Checked: {{ checked }})</b>
    </b-form-checkbox>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        checked: false
      }
    }
  }
</script>

Is there something I'm missing here?

Upvotes: 0

Views: 5414

Answers (1)

Yondonjamts Ganzorig
Yondonjamts Ganzorig

Reputation: 323

It's kind of working, you might need to import css or use latest stable version of bootstrap-vue and Vue.js

new Vue({
  el: '#app',
  data() {
    return {
      checked: false,
    };
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<div id="app">
  <b-form-checkbox v-model="checked" name="check-button" switch>
    Switch Checkbox <b>(Checked: {{ checked }})</b>
  </b-form-checkbox>
</div>

Upvotes: 4

Related Questions