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?
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/bootstrap#4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-vue#2.16.0/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>
Related
Hey I am really new to VUE and for this project I have a button on one page which should trigger or call the function of another page. Everyone will be like why don't you have the button and function on same page as I am trying to learn basic part of how to call function of different page and then implement on my project. I am trying to make it easier and clear while I am asking question.
When I call the method function of chairPage.vue from homePage.vue, it throws an error saying world not defined on homePage.vue. Can anyone please explain why I am getting this error and what's the best way to solve this.
I have two pages one is homePage.vue and another one is chair.Vue. I have a button on homePage.vue which should call the method function of chairPage.vue.
Home Page
<template>
<div id="homepage">
<b-button variant="info" #click="buttonClicked()">Click</b-button>
<chairComponent ref="world"/>
</div>
</template>
<script>
import chairComponent from '#/components/chair.vue';
export default {
props: [],
methods:{
buttonClicked(){
this.$refs.world.hello();
}
}
}
</script>
Chair Page
<template>
<div id="chairComponent">
<p v-if="displayText == '1'"> HELLO WORLD </p>
</div>
</template>
<script>
export default {
props: ['world'],
data(){
return{
displayText:'',
}
},
methods:{
hello(){
console.log('inside child component hello function');
this.displayText = '1';
}
}
}
</script>
You can pass props to your child component, and there watch on props and call function:
Vue.component('Chair', {
template: `
<div id="chairComponent">
<p v-if="displayText == '1'"> HELLO WORLD </p>
</div>
`,
props: ['world'],
data(){
return{
displayText:'',
}
},
methods:{
hello(){
console.log('inside child component hello function');
this.displayText = '1';
}
},
watch: {
world() {
if (this.world) this.hello()
}
}
})
new Vue({
el: '#demo',
data() {
return {
val: null
}
},
methods:{
buttonClicked(){
this.val = true
setTimeout(() => {this.val = false},0)
}
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div id="homepage">
<b-button variant="info" #click="buttonClicked">Click</b-button>
<chair :world="val" />
</div>
</div>
It works perfectly fine in the below snippet
Vue.component('Chair', {
template: `
<div id="chairComponent">
</div>
`,
data(){
return{
displayText:'',
}
},
methods:{
hello(){
console.log('inside child component hello function');
}
},
})
new Vue({
el: '#demo',
methods:{
buttonClicked(){
this.$refs.world.hello();
}
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div id="homepage">
<b-button variant="info" #click="buttonClicked">Click</b-button>
<chair ref="world" />
</div>
</div>
I guess adding the components section in the homepage.vue might make it work
<template>
<div id="homepage">
<b-button variant="info" #click="buttonClicked()">Click</b-button>
<chairComponent ref="world"/>
</div>
</template>
<script>
import chairComponent from '#/components/chair.vue';
export default {
props: [],
// New changes added below
components: {
chairComponent
},
methods:{
buttonClicked(){
this.$refs.world.hello();
}
}
}
</script>
You can $emit from children to parent
https://v2.vuejs.org/v2/guide/components-custom-events.html
Child
hello () {
...//yours code
this.$emit('customEvent', someValue)
}
Parent
<template>
<child
#cutomEvent="function"
/>
<template>
I'm trying to work with pagination using the v-pagination component from bootstrap-vue. It's working more or less as I want, however when I click on a certain page the component is closing.
I would like to know how I can prevent v-select from closing before I select one of the options.
My code:
<v-select
id="municipio"
v-model="municipioState"
:options="municipiosPaginaAtual"
:filterable="false"
placeholder="Selecione seu município"
label="municipio"
#search="buscarMunicipio"
>
<div slot="no-options">
Selecione o Estado!
</div>
<li
slot="list-footer"
class="pagination"
#click.prevent=""
>
<b-pagination
v-model="municipioPaginacao"
:total-rows="municipiosFiltradosQuantidade"
:per-page="limit"
first-number
last-number
/>
</li>
</v-select>
If there is a workaround or other option than v-select I would be pleased to know.
you can use #mouseup.native.capture.stop in the b-pagination tag to prevent closing the dropdown of the vue-select.
Also, in my opinion, you can use vue-multiselect for a better user experience, but it's up to you and your need. I just wanted to suggest it to you as another option.
I provided a simple snippet to show this:
Vue.component("v-select", VueSelect.VueSelect);
new Vue({
el: '#app',
data() {
return {
books: [{
title: "Old Man's War"
},
{
title: "The Lock Artist"
},
{
title: "HTML5"
},
{
title: "Right Ho Jeeves"
},
{
title: "The Code of the Wooster"
},
{
title: "Thank You Jeeves"
}
],
perPage: 2,
currentPage: 1,
rows: 6
}
},
})
<link href="https://unpkg.com/vue-select#3.16.0/dist/vue-select.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue-select#3.16.0/dist/vue-select.js"></script>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<v-select :options="books" label="title">
<li slot="list-footer">
<b-pagination #mouseup.native.capture.stop v-model="currentPage" :total-rows="rows" :per-page="perPage"></b-pagination>
</li>
</v-select>
</div>
I have a code where I can add inputs, with #click="addInput()" .
Now I'm trying do delete these inputs as well with #click="deleteInput(). I've tried to do this with this.inputs.splice(index, 1) - but when I try this only my last input will be deleted.. but I don't know why..
How can I solve that, that my specific Input which I want to delete will be deleted?
The additional code in my inputs at addInput -> name is from child element
Thanks for helping me out!
my template:
<template>
<div >
<div class="mt-2" v-for="(id, index) in inputs" :key="index">
<div class="row mb-3">
<b-button-group class="col-md-12">
<b-button class="col-md-8" v-b-toggle="toggleElementInChildVue" variant="danger"></b-button>
<b-button #click="deleteInput(index)" class="col-md-4" variant="danger">Delete this!</b-button>
</b-button-group>
</div>
</div>
<div>
<b-button #click="addInput()">Add Input</b-button>
</div>
</div>
</template>
my script:
<script>
export default {
name: 'test',
data() {
return {
inputs: [{
name: "",
}],
}
},
methods: {
deleteInput(index) {
this.inputs.splice(index, 1)
},
addInput() {
this.inputs.push({
name: "",
})
},
},
}
</script>
Looks like your delete method works, check snippet pls:
new Vue({
el: '#demo',
data() {
return {
inputs: [{
name: "aa",
}],
}
},
methods: {
deleteInput(index) {
this.inputs.splice(index, 1)
},
addInput() {
this.inputs.push({
name: "bb",
})
},
},
})
Vue.config.productionTip = false
Vue.config.devtools = false
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue-icons.min.js"></script>
<div id="demo">
<div >
<div class="mt-2" v-for="(name, index) in inputs" :key="index">
<div class="row mb-3">
<b-button-group class="col-md-12">
<b-button class="col-md-8" variant="danger">{{name}}</b-button>
<b-button #click="deleteInput(index)" class="col-md-4" variant="danger">Delete this!</b-button>
</b-button-group>
</div>
</div>
<div>
<b-button #click="addInput()">Add Input</b-button>
</div>
</div>
</div>
Ran into a case to trigger a click once a page or view is loaded, and a popup is triggered in vue.js to edit data table row. There is no such a good VUE way that I can find, although the following link mentioned a way as the follows:
https://forum.vuejs.org/t/how-to-trigger-a-click-event-through-code-in-vuejs-on-page-load/92582
mounted: function () {
setTimeout(function(){
const elem = document.getElementById('myBtn');
elem.click();
}, 100);
},
I did in a similar way as the follows. The try catch to contain error although it's ugly, since at some point the data doesn't exist.
edit: function (idx, row) {
... nore code here ...
try {
document.getElementById(row.id).click(); // row.id is dynamic or variable
} catch (error) {
// pass
}
},
However my team mate, a vue.js lover, said it's not a damn VUE way. Now what it the right way to do such a thing?
The following Demo is possible for the expected work:
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
data: {
li_address: [{name: 'CA'}, {name: 'NY'}, {name: 'AL'}],
name: 'NY'
},
methods: {
},
mounted() {
console.log(['this.name', this.name]);
// this.$refs[this.name].click(); // failed
document.getElementById(this.name).click(); // worked. the click is triggered upon this.name
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/uikit.min.js"></script>
<div id="app" class="container">
<div class="uk-grid" uk-grid>
<div v-for="r in li_address">
<label>{{r.name}}
<input :id="r.name" :ref="r.name" type="radio" class="uk-radio" :value="r"
name="address_group">
</label>
</div>
</div>
</div>
Add a ref to your element called myBtn like :
<div ref="myBtn" >some content</div>
then run the click :
this.$refs.myBtn.click()
example :
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#app',
methods: {
logOk() {
console.log("OK OK")
}
},
mounted() {
this.$refs.okBtn.click()
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app" class="container">
<button ref="okBtn" #click="logOk"> OK</button>
</div>
Just select your element and trigger Click Event on Mounted life cycle of Vue app
mounted() {
this.$nextTick(() => {
document.getElementById('myBtn').click()
});
}
$nextTick according to VueJs documentation :
Defer the callback to be executed after the next DOM update cycle. Use
it immediately after you’ve changed some data to wait for the DOM
update.
In your example code, there is no need for any DOM manipulation. The main strength of a declarative reactive framework like Vue is for changes to the model to be automatically propagated to the view. This will select the appropriate radio button just by setting v-model appropriately.
new Vue({
el: '#app',
data() {
return {
li_address: [{name: 'CA'}, {name: 'NY'}, {name: 'AL'}],
name: 'NY'
}
}
})
<div id="app" class="container">
<div class="uk-grid" uk-grid>
<div v-for="r in li_address">
<label :for="r.name">{{r.name}}
<input type="radio" v-model="name" :id="r.name" :value="r.name">
</label>
</div>
<h4>NAME: {{ name }}</h4>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/css/uikit.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.5/js/uikit.min.js"></script>
I want to add an eventhandler on my component. When I click the button I want the component to show. I tried all kinds of solutions but I think my knowledge is lacking. Here is my code, I would be thankful for help. Feel free to explain what the best methods are for solving this problem and how I should think in scenarios like these. Appricitate your time.
HTML
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<title>SneakPeak</title>
</head>
<body>
<div id="body-div">
<div id="app">
<modal-button></modal-button>
<modal-1 v-if="modalStatus == 2"></modal-1>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="app.js"></script>
</div>
</body>
</html>
JAVASCRIPT
// Define a new component called button-counter
Vue.component('modal-button', {
data: function () {
return {
count: 0,
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
// Defining a component called modal-1
Vue.component('modal-1', {
props: ["sModal"],
template: `
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header"
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
`
})
var shaba = new Vue({
el: '#app',
props: ["sModal"],
data: {
modalStatus: 0
},
})
// // register modal component
// Vue.component('modal', {
// template: modalTemplate
// })
// // start app
// new Vue({
// el: '#body-div',
// data: {
// showModal: false
// }
// })
Old Answer:
if you want to show/hide your component on click then use #click="val = !val" on the button component and use v-if or v-show="val" on the modal componant to enable/ disable Display.
set val: false in your data.
New Answer:
Looks Like you button is already capturing click so please follow this pen https://codepen.io/ashwinbande/pen/WPozgR
what we are doing is on button click executing a method which increments count as well as emits a custom event. In button component on that event, we change the value of val. then the val is used to show hide the modal component`!