I using tooltip like in exemple Toggle Tooltip:
<template>
<div class="text-center">
<div>
<b-button id="tooltip-button-1" variant="primary">I have a tooltip</b-button>
</div>
<div class="mt-3">
<b-button #click="show = !show">Toggle Tooltip</b-button>
</div>
<b-tooltip :show.sync="show" target="tooltip-button-1" placement="top">
Hello <strong>World!</strong>
</b-tooltip>
</div>
</template>
<script>
export default {
data: {
show: true
}
}
</script>
But I don’t need it to open on the hover.
Can anyone help to figure it out?
In the tooltip component there's a prop called triggers in which you could specify the event that could trigger the tooltip :
<b-tooltip :show.sync="show" target="tooltip-button-1" triggers="click" placement="top">
Hello <strong>World!</strong>
</b-tooltip>
Related
I am trying to add a click event to a text add states in description method stated below. Please help me resolve this issue.
<div>
class="alert-container"
v-for="alert in alerts"
>
<div class="alert-item">
<div class="alert-info">
{{alert.sender}}
</div>
<div v-if="alert.alert_type === 'urgent'">
<div class="alert-description">{{ addMethod(alert.description) }}</div>
</div>
<div v-else class="alert-description" v-html="alert.description"></div>
</div>
</div>
<script>
export default {
methods: {
addMethod(text) {
return text + '-' + add click event to here to the description text just so when the user clicks on the event below evacuation method runs.
},
evacuation() {
console.log("Leave the building now.")
}
}
}
</script>
Just render the description text then add the click avent to the wrapper element :
<div class="alert-description" #click="evacuation">{{ alert.description }} - </div>
adding the event inside a string and rendering it using v-html will not be interpreted.
<div class="alert-description">{{ alert.description }} - <div class="evacuation">Click here</div></div>
this is how I solved my problem
I have this accordion and a collapse (as a component because I need to loop it). Here's the code:
accordion.vue
<div class="accordion col-lg-8 mx-auto" role="tablist">
<b-card no-body class="mb-1 py-2" v-for="each in questions" :key="each.id">
<Collapses v-bind:each="each"/>
</b-card>
</div>
Collapses.vue
<div>
<b-button #click="isActive = !isActive" role="tab" block v-b-toggle="'accordion-'+each.id">{{ each.question }}
<i class="float-right fa" :class="{ 'fa-plus': !isActive, 'fa-minus': isActive }"></i>
</b-button>
<b-collapse v-bind:id="'accordion-'+each.id" visible accordion="my-accordion" role="tabpanel">
<b-card-body>
<b-card-text>{{ each.answer }}</b-card-text>
</b-card-body>
</b-collapse>
</div>
<script>
export default {
props: ["each"],
data() {
return {
isActive: false
}
}
}
</script>
The accordion works fine except the icons. The accordion only shows one (expanded) collapse at a time. Whenever I click another collapse, the previous collapse closes, but the icon doesn't change (because I did not click it). How do I automatically change the icon whenever the collapse closes?
The b-collapse events include show and hide, which is emitted when the component state changes. Thus, you could use a v-on directive (or # for shortand) to bind an event listener in the template that sets the isActive flag accordingly:
<b-collapse #hide="isActive = false" #show="isActive = true">
Then you could remove the button-click handler as it's already taken care of by the event binding above.
demo
Your data is defined like method, try to do it in more clear way:
{
data: () => ({
isActive: false
})
}
I've created three simple buttons that will trigger three different bootstrap modal dialog. The modal dialogs are "Add Product", "Edit Product" and "Delete Product". Both the Add and Edit modal dialogs contain a form with two input elements, whereas the Delete modal dialog contains a simple text. I realise that my code becomes very messy and hard to maintain. Hence, I have the following question:
1) How do I reuse the modal dialog, instead of creating 3 separate dialogs?
2) How do I know which modal dialog has been triggered?
Update: I've developed a soultion where I will include conditional statements such as v-if, v-else-if and v-else to keep track of which button the user click. However, I still feel that there is a better solution to this. Can anyone help/advice me?
Below is my current code:
<template>
<div>
<b-button v-b-modal.product class="px-4" variant="primary" #click="addCalled()">Add</b-button>
<b-button v-b-modal.product class="px-4" variant="primary" #click="editCalled()">Edit</b-button>
<b-button v-b-modal.product class="px-4" variant="primary" #click="deleteCalled()">Delete</b-button>
<!-- Modal Dialog for Add Product -->
<b-modal id="product" title="Add Product">
<div v-if="addDialog">
<form #submit.stop.prevent="submitAdd">
<b-form-group id="nameValue" label-cols-sm="3" label="Name" label-for="input-horizontal">
<b-form-input id="nameValue"></b-form-input>
</b-form-group>
</form>
<b-form-group id="quantity" label-cols-sm="3" label="Quantity" label-for="input-horizontal">
<b-form-input id="quantity"></b-form-input>
</b-form-group>
</div>
<div v-else-if="editDialog">
<form #submit.stop.prevent="submitEdit">
<b-form-group id="nameValue" label-cols-sm="3" label="Name" label-for="input-horizontal">
<b-form-input id="nameValue" :value="productName"></b-form-input>
</b-form-group>
</form>
<b-form-group id="quantity" label-cols-sm="3" label="Quantity" label-for="input-horizontal">
<b-form-input id="quantity" :value="productQuantity">5</b-form-input>
</b-form-group>
</div>
<div v-else>
<p class="my-4">Are You Sure you want to delete product?</p>
</div>
</b-modal>
</div>
</template>
<script>
export default {
data() {
return {
productName: "T-Shirt",
productQuantity: 10,
addDialog: false,
editDialog: false,
deleteDialog: false
};
},
methods: {
addCalled() {
this.addDialog = true;
},
editCalled() {
this.editDialog = true;
this.addDialog = false;
this.deleteDialog = false;
},
deleteCalled() {
this.deleteDialog = true;
this.addDialog = false;
this.editDialog = false;
}
}
};
</script>
<style>
</style>
As already mentionned, I would have use slots and dynamic component rendering to accomplish what you're trying to do in a cleaner way.
See snippet below (I didn't make them modals as such but the idea is the same).
This way, you can have a generic modal component that deals with the shared logic or styles and as many modalContentsub-components as needed that are injected via the dedicated slot.
Vue.component('modal', {
template: `
<div>
<h1>Shared elements between modals go here</h1>
<slot name="content"/>
</div>
`
});
Vue.component('modalA', {
template: `
<div>
<h1>I am modal A</h1>
</div>
`
});
Vue.component('modalB', {
template: `
<div>
<h1>I am modal B</h1>
</div>
`
});
Vue.component('modalC', {
template: `
<div>
<h1>I am modal C</h1>
</div>
`
});
new Vue({
el: "#app",
data: {
modals: ['modalA', 'modalB', 'modalC'],
activeModal: null,
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button v-for="modal in modals" #click="activeModal = modal"> Open {{ modal }} </button>
<modal>
<template slot="content">
<component :is="activeModal"></component>
</template>
</modal>
</div>
Update
Now, You might think how will you close your modal and let the parent component know about it.
On click of button trigger closeModal for that
Create a method - closeModal and inside commonModal component and emit an event.
closeModal() {
this.$emit('close-modal')
}
Now this will emit a custom event which can be listen by the consuming component.
So in you parent component just use this custom event like following and close your modal
<main class="foo">
<commonModal v-show="isVisible" :data="data" #close- modal="isVisible = false"/>
<!-- Your further code -->
</main>
So as per your question
A - How do I reuse the modal dialog, instead of creating 3 separate dialogs
Make a separate modal component, let say - commonModal.vue.
Now in your commonModal.vue, accept single prop, let say data: {}.
Now in the html section of commonModal
<div class="modal">
<!-- Use your received data here which get received from parent -->
<your modal code />
</div>
Now import the commonModal to the consuming/parent component. Create data property in the parent component, let say - isVisible: false and a computed property for the data you want to show in modal let say modalContent.
Now use it like this
<main class="foo">
<commonModal v-show="isVisible" :data="data" />
<!-- Your further code -->
</main>
The above will help you re-use modal and you just need to send the data from parent component.
Now second question will also get solved here How do I know which modal dialog has been triggered?
Just verify isVisible property to check if modal is open or not. If isVisible = false then your modal is not visible and vice-versa
I am currently writing a Vue component for a project.
I encountered a Problem where a Bootstrap-Vue modal will re open again instead of closing.
I am using Vue.js in Version 2.6.10 and Bootstrap 4.
<template>
<div>
<b-button v-b-modal.rating-modal #click="showModal()">
Click me
<b-modal ref="rating-modal" no-close-on-backdrop centered title="Rate" class="rating-modal" #ok="hideModal" #cancel="hideModal" #close="hideModal">
<div>
Content of the modal...
</div>
</b-modal>
</b-button>
</div>
</template>
<script>
export default {
name: "Rating",
components: {
,
},
methods: {
showModal() {
this.$refs['rating-modal'].show();
},
hideModal() {
this.$refs['rating-modal'].hide();
},
}
}
;
</script>
I expect it to close when I hit either cancel, ok or the cross in the header.
Ok, I resolved the Issue by myself. All I had to do is to move the b-modal tag out of the b-button tag like this:
<template>
<div>
<b-button v-b-modal.rating-modal #click="showModal()">
Click me
</b-button>
<b-modal ref="rating-modal" no-close-on-backdrop centered title="Rate" class="rating-modal" #ok="hideModal" #cancel="hideModal" #close="hideModal">
<div>
Content of the modal...
</div>
</b-modal>
</div>
</template>
Code:
<v-btn large color="green" #click="function">
<v-icon>star</v-icon> Add
</v-btn>
Is there a solution in Vue or is it also possible via JavaScript?
You can hide a button using the vue onClick-event v-on:click.
v-on:click="isHidden = true"
The attribute isHidden can be set to "true" so that the text or a button gets invisible if v-if="!isHidden" is added to the element of your choice.
Have a look at this easy snippet:
var myApp = new Vue({
el: '#myApp',
data: {
isHidden: false
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<div id="myApp">
<button v-on:click="isHidden = true">Hide text</button>
<button v-on:click="isHidden = !isHidden">Toggle text</button>
<h1 v-if="!isHidden">Hide me</h1>
</div>
Hide the button onClick is possible using this code:
var myApp = new Vue({
el: '#myApp',
data: {
isHidden: false
}
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<div id="myApp">
<button v-if="!isHidden" v-on:click="isHidden = true">Hide text</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.13/dist/vue.js"></script>
<div id="app">
<button v-if="btn" #click="toggle">Press to Hide This Button</button>
</div>
Script
var app = new Vue({
el: '#app',
data: {
btn: true
},
methods: {
toggle() {
this.btn = false;
}
}
})
something like this should work.
if btn is true, the button will be displayed.
if the button is pressed, the toggle function is triggered, btn is changed to false. the button is only shown if btn is true.
what you can do is to use css to add a class to the element.
Front there you can now hide the element using css rules.
an example can be passing the state of the element (that is to hide or to show as an attribute to your component when clicked)
eg
<v-btn large color="green" #click="function">
<v-icon>star</v-icon> Add
</v-btn>
to
<v-btn large color="green" #click="function" v-bind"hide = true">
<v-icon>star</v-icon> Add
</v-btn>
then you can now use the variable in your vue component to know if you need to show or hide. That's all