I have a Vue component that has a navigation button, when the component is used the button is not getting disabled when reached last record. Please suggest a solution.
Vue Component:
<template>
<div>
<div class="sliderArrowWrapper">
<div class="customArrowLeft" :id="`${navigateID}Left`" style="margin-right: 10px" >
<span class="arrowText">Prev</span>
</div>
<div class="customArrow" :id="`${navigateID}Right`" style="margin-left: 10px" >
<span class="arrowText">Next</span>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['navigateID']
}
</script>
Related
I started using Laravel with vue.js, i have created some pages using vue.js
so i have modal that i would like to use in both of pages ( page1.vue and page2.vue ) without re write the modal html code again:
Page1.vue
<template>
<div>Page 1 </div>
</template>
Page2.vue
<template>
<div>Page 2 </div>
</template>
How can i share a modal.vue with this two pages
Just import the modal component into both pages. Here ive done it with a bool modalBool that will toggle weather the modal is displayed or not.
<template>
<div>
Page 1
<modal v-if="modalBool"> </modal>
</div>
</template>
<script>
import Modal from "./Modal.vue";
export default {
components: {
Modal,
},
data() {
return {
modalBool: false,
};
},
};
</script>
<style lang="scss" scoped></style>
You can add things like on close to reset the bool in the parent
<template>
<div>
Page 1
<modal v-if="modalBool" v-on:close="showInvitationModal = false"> </modal>
</div>
</template>
Here is an example of my modal that will emit close when closed. The parent is listening for this close and will reset the modalBool. This will be emitted if the user clicks outside of the modal or on the X
<template>
<transition name="component-fade" mode="out-in">
<div class="modal-background" #click.self="$emit('close')">
<div class="modal-body shadow">
<h2 class="modal-title">
<div>{{ title }}</div>
<div>
<button class="btn-clear" #click="$emit('close');">
<font-awesome-icon :icon="timesIcon" class="pointer" />
</button>
</div>
</h2>
<div>
<slot></slot>
</div>
</div>
</div>
</transition>
</template>
I have created a vue single page this way:
My app.vue
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div id="app">
<Navegacion/>
<Cabecera/>
<Contenido/>
<Aside/>
<Footer/>
</div>
</template>
My navigation.vue
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div class="flex flex-row blanco">
<div class="item-uno">
<nav class="flex flex-row items-center">
<a #click="desplazar" href="#">Quienes somos</a>
<a #click="desplazar" href="#">Cómo funciona</a>
<a #click="desplazar" href="#">Servicios a empresas</a>
<a #click="desplazar" href="#">Compromiso</a>
</nav>
</div>
<div class="item-dos flex justify-center">
<img id="logo" src="../assets/logo.svg" alt="logo apeteat">
</div>
<div class="item-uno flex justify-center items-center">
<a class="btn blue">Nuevo pedido</a>
<div class="flex flex-row items-center">
<i class="fas fa-shopping-bag"></i>
<p>0,00 €</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Navegacion',
props: {
},
methods: {
desplazar: function() {
window.scrollTo(0,200);
}
}
}
</script>
I want to make scroll to the correspondent component when clicking on a navigation link.
I have installed npm scroll-to, and I have tried to add a function methd desplazar but it's not working.
Thanks in advance for your help.
window.scrollTo() is javascript window method, you don't need to install anything to use it.
It works in your code but href="#" always throw you at the top of the page so it's cancelling window.scrollTo().
You need to remove href="#" from your links.
To scroll to component first you need to add ref to it like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div id="app">
<Navegacion ref="Navegacion" />
<Cabecera ref="Cabecera" />
<Contenido ref="Contenido" />
<Aside ref="Aside" />
<Footer ref="Footer" />
</div>
</template>
and your function should looks like this
scrollToNavegacion() {
window.scrollTo(0, this.$refs.Navegacion.$el.offsetTop);
}
I have the following code for a component called navbar-base:
<template>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<slot name="brand"></slot>
<button class="button navbar-burger" v-if="burger" >
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<slot name="menu-left"></slot>
</div>
<div class="navbar-end">
<slot name="menu-right"></slot>
</div>
</div>
</nav>
</template>
<script>
export default {
props: {
burger: {
type: Boolean,
default: false
}
},
computed: {
hasBurger () {
this.burger = true
return this.burger
}
}
}
</script>
What I would like to do is to be able to toggle on or off the navbar-burger as follows:
Burger is visible (toggled on)
<navbar-base class="is-info" hasBurger>
Brand name
Courses
Videos
Login
Signup
</navbar-base>
Burger is NOT visible (toggled off)
<navbar-base class="is-info">
Brand name
Courses
Videos
Login
Signup
</navbar-base>
In other words, if I add hasBurger to the <navbar-base> tag then the burger code will be included. Otherwise it won't.
The problem is that my code is not working -- and I'm not sure how to get it to work.
Any ideas?
Thanks.
I got it to work. The key was to actually NOT use a computed property at all. This is the working code (in case anyone finds it helpful):
<template>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<slot name="brand"></slot>
<button class="button navbar-burger" v-if="hasBurger" >
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<slot name="menu-left"></slot>
</div>
<div class="navbar-end">
<slot name="menu-right"></slot>
</div>
</div>
</nav>
</template>
<script>
export default {
props: {
hasBurger: {
type: Boolean,
default: false
}
}
}
</script>
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
Is there any way to implement the following carousel in Vue2. Link :
Image Carousel
// Parent component
<div class="col">
<slider>
<slide v-for="intro in compOpts.blockIntro">
<block-intro :compOpts="{ props: { wrapper: true, bg: false } }">
<p v-html="intro.title"></p>
<div slot="content" v-html="intro.content" class="blockIntro__content"></div>
</block-intro>
</slide>
</slider>
</div>
// Slider component
<div class="slider__container">
<slot></slot>
</div>
// Slide component
<div>
<slot></slot>
</div>
// BlockIntro component
<div class="col--h100" :class="{ 'bg--darkDark': compOpts.props.bg, 'col': !compOpts.props.wrapper }">
<div class="col col__blockIntro" :class="{ 'col__blockIntro--spaced': compOpts.props.spaced }">
<div class="col col__blockIntro__introQuote">
<slot></slot>
</div>
<slot name="content"></slot>
</div>
My Slide component is giving me the BlockIntro component template and div.col--h100 is the first/parent child element inside Slider. Now I'm trying to add an visible class to div.col--h100 from the Slider component. I consoled the Vnode using $slots but can't change the value in $slots.$elm.className
Please help.