I have the following view:
<div id="root" class="container">
<template>
<popover trigger="hover" effect="fade" placement="top" title="Title">
<button class="btn btn-default">Popover on bottom</button>
</popover>
</template>
</div>
<script src="https://unpkg.com/vue#2.1.3/dist/vue.js"></script>
<script src="lesson.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.1.37/vue-strap.min.js"></script>
My lesson.js file looks the following:
new Vue({
el: "#root",
data: {
content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit, sed do eiusmod',
},
components: {
popover: VueStrap.popover
},
});
But then I got the following error:
[Vue warn]: failed to compile template:
<span v-el:trigger> <slot></slot> <div v-el:popover v-if=show
:class="['popover',placement]" :transition=effect>
<div class=arrow></div> <h3 class=popover-title v-if=title>
<slot name=title>{{title}}</slot>
</h3> <div class=popover-content> <slot name=content>{{{content}}}</slot>
</div> </div> </span>
- invalid expression: {{{content}}}
(found in component <popover>)
pls, help
It is compiling error
<slot name=content>{{{content}}}</slot>
Edited
And this error is in source of component
Actually, there is another version of vue bootstrap which works without errors:
https://bootstrap-vue.github.io/docs/setup/
Related
I'm trying to learn some Vue, I have tab component it has 2 tabs with some dropdowns and text fields inside, the problem is when I switch between tabs it loss data like selected items from dropdowns or text values, I've tried with v-model but nothing, any help?
Here is the tab view
<script setup>
import { ref } from 'vue';
const nestedRouteItems = ref([
{
label: 'Personal',
to: '/uikit/ficha'
},
{
label: 'Seat',
to: '/uikit/ficha/seat'
},
]);
</script>
<template>
<div class="grid">
<div class="col-12 md:col-12">
<div class="card p-fluid">
<h5>Ficha</h5>
<div class="col-12 md:col-12">
<div class="card card-w-title">
<h5>Tab container</h5>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
<TabMenu :model="nestedRouteItems" />
<router-view />
</div>
</div>
</div>
</div>
</div>
</template>
Here is the content of first tab:
<template>
<div class="flex align-items-center py-5 px-3">
<div class="card p-fluid" style="width:800px">
<h5>Datos personales</h5>
<div class="field">
<label for="name1">Nombre</label>
<InputText id="name1" type="text" />
</div>
</div>
</div>
</template>
Here is the content of second tab:
<script setup>
import { ref } from 'vue';
const dropdownItems = ref([
{ name: 'Principal', code: 'Principal' },
{ name: 'Laboral', code: 'Laboral' },
{ name: 'Familiar', code: 'Familiar' }
]);
const dropdownItem = ref(null);
</script>
<template>
<div class="flex align-items-center py-5 px-3">
<div class="card p-fluid" style="width:800px">
<h5>Domicilio</h5>
<div class="field">
<label for="tipoDomicilio">Tipo de domicilio</label>
<Dropdown id="tipoDomicilio" v-model="dropdownItem" :options="dropdownItems" optionLabel="name" placeholder="Elegir opción..."></Dropdown>
</div>
</div>
</div>
</template>
You can use KeepAlive to do this.
<KeepAlive> is a built-in component that allows us to conditionally
cache component instances when dynamically switching between multiple
components.
If your tab components are dynamic then use KeepAlive like this-
<KeepAlive>
<component :is="tabComponent" />
</KeepAlive>
If you are using tab components individually then do like this-
<KeepAlive>
<tab-a></tab-a>
<tab-b></tab-b>
</KeepAlive>
You can read more about KeepAlive in the documentation.
I am trying to have dynamic routes in my application.
I have main route '/blogs' which contains 3 static blogs, I want is that each blog should be rendered with its own content like '/blogs/blog-1' and for blog 2 like '/blogs/blog-2', I have tried with docs but couldn't understand as I am beginner.
Here is my code to all the components,
router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/views/Home.vue'
import Blogs from './components/views/Blogs.vue'
import Blog_1 from './components/blogs/Blog_1';
import Blog_2 from './components/blogs/Blog_2';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
component: Home,
},
{
path: "/blogs",
component: Blogs,
children: [
{
path: 'blog-1',
component: Blog_1
},
{
path: 'blog-2',
component: Blog_2
}
]
},
],
scrollBehavior(to,) {
if (to.hash) {
return {
el: to.hash,
behavior: 'smooth',
top: 0
}
}
},
});
export default router;
Here is Blog.vue which have all the static blogs not full but half
<template>
<!-- ***** Blog Start ***** -->
<section class="section" id="blog">
<div class="container">
<!-- ***** Section Title Start ***** -->
<div class="row">
<div class="col-lg-12">
<div class="center-heading">
<h2 class="section-title">Blog Entries</h2>
</div>
</div>
<div class="offset-lg-3 col-lg-6">
<div class="center-text">
<p>
Integer molestie aliquam gravida. Nullam nec arcu finibus,
imperdiet nulla vitae, placerat nibh. Cras maximus venenatis
molestie.
</p>
</div>
</div>
</div>
<!-- ***** Section Title End ***** -->
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="blog-post-thumb">
<div class="img">
<img src="assets/images/1x/blog-item-01.png" alt="" />
</div>
<div class="blog-content">
<h3>
Online Presence of Business
</h3>
<div class="text">
As Covid-19 came, it throttled small and medium businesses in
great depth. Not every one can recover from it.
</div>
Read More
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="blog-post-thumb">
<div class="img">
<img
height="220"
width="370"
src="assets/images/1x/blog-item-02.jpg"
alt=""
/>
</div>
<div class="blog-content">
<h3>
<a href="#"
>Why Having a Website is Important for a small business?</a
>
</h3>
<div class="text">
The number of small businesses with a website is surprisingly
low despite the growth in technology.
</div>
Read More
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="blog-post-thumb">
<div class="img">
<img
height="220"
width="370"
src="assets/images/1x/blog-item-03.jpg"
alt=""
/>
</div>
<div class="blog-content">
<h3>
Impact of Advertisment on Customer
</h3>
<div class="text">
Have you ever thought, why giant companies such as apple,
google, Samsung invest millions on advertisement?
</div>
Read More
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ***** Blog End ***** -->
</template>
As I want to click on read more ,so it should go to the complete article which should be in another component.
Thank You
You can use route params to match those slugs:
routes: [
{
path: "/",
component: Home,
},
{
path: "/blogs/:slug", // This `:` syntax means it's a variable
name: 'blogs',
component: Blogs
},
],
(You don't need the child routes you had.) When you use a route param like that, the :slug segment can be replaced by whatever you like. So if you do visit a route like /blogs/blog-1, it will match that route. And the dynamic portion will be available in the component as
this.$route.params.slug
In this example, that would show "blog-1". Also, notice that I gave the route a name "blogs". That's so that when you want to visit that route, you can use a <router-link> like:
<router-link :to="{ name: 'blogs', params: { slug: 'blog-1' }}">
Blog 1
</router-link>
I have a method to show a popup with some data, the function receive some data in a array and i need to show it in the popup html.
openDetails(data) {
const self = this;
// Create popup
if (!self.popup) {
self.popup = self.$f7.popup.create({
content: `
<div class="popup itemDetails">
<div class="page">
<div class="navbar">
<div class="navbar-inner">
<div class="title">{{ data.name }}</div>
<div class="right">volver</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>This popup was created dynamically</p>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</div>
</div>
`.trim(),
});
}
// Open it
self.popup.open();
},
This is how the popup looks
What i´m doing wrong here?
As you are using template literals:
<div class="title">${data.name}</div>
<div class="title" v-html="data.name"></div>
have you try like this ?
I have 3 vue components
My first component (MultiplePhoto.vue):
<template>
<div>
<table class="table table-bordered table-thumb">
<tr>
<template v-for="item in items">
<td data-target="#modal-option" data-toggle="modal">
...
</td>
</template>
<option-modal id="modal-option" :product="product"></option-modal>
</tr>
</table>
</div>
</template>
<script>
import OptionModal from './OptionModal.vue'
export default {
name: 'MultiplePhoto',
props: ['product'],
components: { OptionModal },
data() {
return {
items: [1,2,3,4,5]
}
},
...
}
</script>
If I click the td tag it successfully displays modal (OptionModal component)
My second component (OptionModal.vue):
<template>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<div class="col-sm-9">
<a data-target="#modal-edit-photo" data-toggle="modal">Edit</a>
</div>
</div>
...
</div>
</div>
</div>
</div>
<edit-image-modal id="modal-edit-photo" :id-product="product.id"></edit-image-modal>
</div>
</template>
<script>
import EditImageModal from './EditImageModal.vue'
export default{
name: 'OptionModal',
props: ['product'],
components: { EditImageModal},
....
}
</script>
In OptionModal component, if I click the a tag, it tagdoesn't display the modal (EditImageModal component)
My third component (EditImageModal.vue):
<template>
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
....
</div>
</div>
</div>
</template>
<script>
export default {
name: 'EditImageModal',
,,,
}
</script>
There is no error.and I'm still confused how to solve the problem.
How can I solve the problem?
Please help me
I,m trying to make a responsive website using bootstrap3 that is 3-column in large screens and 2-column in medium:
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4" id="sidebar1"></div>
<div class="col-lg-6 col-md-8" id="main"></div>
<div class="col-lg-3 col-md-4" id="sidebar2"></div>
</div>
</div>
http://www.bootply.com/yfJF1flD0V
but this code not working properly and on medium size, sidebar2 goes in a new row and i want sidebar2 goes below sidebar1 directly. how can i do that?
You've got to duplicate some of your content and use hidden-lg and visible-lg.
DEMO ON BOOTPLY
<div class="container">
<div class="row">
<!-- on md only -->
<div class="col-md-4 hidden-lg">
<div class="row">
<div class="col-md-12 grey1">
Sidebar 1 md - Lorem ipsum dolor sit amet...
</div>
<div class="col-md-12 grey2">
Sidebar 2 md - Lorem ipsum dolor sit amet...
</div>
</div>
</div>
<!-- on lg only -->
<div class="col-lg-2 visible-lg">
Sidebar 1 lg - Lorem ipsum dolor sit amet...
</div>
<div class="col-lg-2 col-lg-push-8 visible-lg">
Sidebar 2 lg - Lorem ipsum dolor sit amet...
</div>
<!-- on all -->
<div class="col-md-8 col-lg-pull-2">
Main all - Lorem ipsum dolor sit amet...
</div>
</div>
</div>
Because of the requirement to stack your sidebars on md screens with main content to their right, you've got to put the sidebars in a containing column. But that containing column then makes it so you can't bookend your sidebars around that same main content in lg screens. Hence the need to use visible and hidden. I always feel like they're a bit clunky, but otherwise I think you won't get exactly what you want...
I do it with jQuery.
<div class="container">
<div class="row">
<div class="col-lg-3 col-md-4" id="sidebar1"></div>
<div class="col-lg-6 col-md-8" id="main"></div>
<div class="col-lg-3 col-md-4" id="sidebar2"></div>
</div>
</div>
and jQuery:
function mediumResponsive() {
// Reset everything
$( '#main>div' ).removeClass('col-md-8');
$("#sidebar1").next().andSelf().unwrap();
$( "#sidebar2" ).insertAfter( $( "#main" ) );
if ($('#is-md').is(":visible")) {
// Do medium responsive
$( "#sidebar2" ).insertAfter( $( "#sidbar1" ) );
$("#sidebar1").next().andSelf().wrapAll('<div class="col-md-4"><div class="container-fluid"');
$( '#main>div' ).addClass('col-md-8');
};
};
$(document).ready(mediumResponsive);
$(window).bind( "resize", mediumResponsive );
and it works.
Please tell me your comments.