We Keep Coding

Vue - how to load a component in a sweet alert?

I have a very basic basic component
testcomponent
<template>
<div class="test">
<h1>testing</h1>
</div>
</template>
Then i have a main component, where i have a button that, when pressed, should open a sweet alert and the content of the alert should be testcomponent.
I tried this:
<template>
<v-btn #click="showAlert"
outlined
small
tile
style="color: white"
>Open</v-btn>
</template>
<script>
export default {
props:{
},
data() {
},
mounted() {
},
methods: {
showAlert() {
// Use sweetalert2
this.$swal.fire({html: '<testcomponent></testcomponent>'});
},
}
}
</script>
The problem with this code is that the component is not loaded, i see a blank space. Is there any way to do this? Thanks in advance!

Unable to use prevent default option on button click using Vue.js

Here what I am trying is I have dynamic data and displaying it in section and section is clickable and under that, I have 2 buttons called edit, del after clicking those buttons also it should trigger some action.
The problem I am facing is even though I am clicking edit action but the section button click also getting triggered and I tried putting #click.prevent still facing the issue.
what I need is whenever I click on edit or del the section action should not trigger below is my code sandbox URL
https://codesandbox.io/s/vuejs-with-import-json-example-forked-tjn45?fontsize=14&hidenavigation=1&theme=dark
code
<template>
<div>
<section
style="border-style: dotted"
v-for="(name, index) in names"
:key="index"
#click.prevent="methodOne"
>
<div>
<button #click.prevent="edit">Edit</button>
<button #click="del">Del</button>
</div>
<div>
{{ name }}
</div>
</section>
</div>
</template>
<script>
import states from "../assets/data.json";
export default {
name: "HelloWorld",
computed: {
names() {
return states.accounts.map((item) => {
return item.name;
});
},
},
methods: {
methodOne() {
alert("Method One");
},
edit() {
alert("Edit");
},
del() {
alert("DELETE");
},
},
};
</script>

This is event propagation issue, .prevent don't stop the propagation, Use .stop instead of .prevent. Update example here
<div>
<button #click.stop="edit">Edit</button>
<button #click.stop="del">Del</button>
</div>

Show or hide offcanvas menu when router link is clicked

I have a vue electron app where the main menu template is loaded inside the App.vue file. I want to hide it when a <router-link> is clicked. It's an offcanvas menu so only the hamburger button is always displayed in all the components and the content will be showed only when the button is clicked. Is there any valid solution to manage this?
This is a sample of the menu markup that is inside the main view loaded inside the App.vue file
<template>
<div>
<nav v-if="isVisible">
<button #click.prevent="toggleMenu()"><i class="fas fa-bars"></i></button>
<li><router-link to="/"></router-link></li>
<li><router-link to="/link-one"></router-link></li>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export {
methods: {
toggleMenu() {
this.isVisible = !this.isVisible;
}
}
}
</script>
At the moment the offcanvas content will remain on screen also after the router view will change.

use click.native?
Did a quick search on stackoverflow, looks like click on router-link will trigger click.native
https://stackoverflow.com/a/52230500/13703967
<template>
<div>
<nav v-if="isVisible">
<button #click.prevent="toggleMenu()"><i class="fas fa-bars"></i></button>
<li><router-link to="/" #click.native="toggleMenu"></router-link></li>
<li><router-link to="/link-one" #click.native="toggleMenu"></router-link></li>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export {
methods: {
toggleMenu() {
this.isVisible = !this.isVisible;
}
}
}
</script>

How to disable tooltip opening by hover using Bootstrap Vue

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>

VueJs: How to reuse bootstrap modal dialog

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