i am a new to vuejs and nuxtjs, I am trying to capture the slider event.
I want to capture the slider event to show the active slide value, can anyone provide me any solution for this, I am working on nuxtjs using b-carousel i.e vuejs bootstrap. Here is my code for the same.
<b-carousel
ref="myCarousel"
id="carousel-1"
v-model="slide"
:interval=interval
controls
indicators
background="#ababab"
width="512"
height="240"
style="text-shadow: 1px 1px 2px #333;"
#sliding-start="onSlideStart"
#sliding-end="onSlideEnd"
v-on:change="signalChange"
>
<b-carousel-slide
caption="First slide"
text="Nulla vitae elit libero, a pharetra augue mollis interdum."
img-src="https://picsum.photos/1024/480/?image=52"
height="200px;"
v-for="(item, index) in word_list"
:key="item.words"
v-bind:class="[
index == 0 ? 'carousel-item active audio_slider' : 'carousel-item audio_slider',
]"
>
<div id="carousel-amusement-slider-active" width="100%" height="100%">
<audio controls id="slider_audio" style="text-align:center" hidden >
<source :src="'http://localhost/api/public/Languages/English/'+ item.words + '.mp3'" type="audio/ogg"></source>
<source :src="'http://localhost/api/public/Languages/English/'+ item.words + '.mp3'" type="audio/mpeg"></source>
Your browser does not support the audio element.
</audio>
<div class="amusement-slider-block">
<!-- <h5>{{ item.length }}</h5> -->
<h5 class="auto-slider-heading">
{{ item.parent_name }}
</h5>
<div class="amusement-slider-wrap">
<h6 class="pb-2">{{ item.words }}</h6>
<h6 v-if="item.word_with_dot">
{{
(item1 = item.word_with_dot.replaceAll(
"-",
"·"
))
}}
</h6>
<h6 class="fw-normal fst-italic my-2">
{{ item.word_class }}
</h6>
<p class="auto_slider_inline auto_slider_def">
{{ words_info.definition }}
</p>
<br />
<p class="auto_slider_inline">
Also see: {{ item.synonyms }}
</p>
<br />
<p class="auto_slider_inline">
"{{ item.word_usage }}"
</p>
</div>
</div>
</div>
</b-carousel-slide>
</b-carousel>
Target : I want to watch the slider event to capture its value on change. I want to capture the slider event to show the active slide value, can anyone provide me any solution for this, I am working on nuxtjs using b-carousel i.e vuejs bootstrap. Here is my code for the same.
Related
I am struggling solving my navigation q-carousel that I want, it is does not work.
It just shows default navigation only but not the custom one that I grab the code from the Quasar website.
My template:
<q-card-section class="q-pa-none" >
<div style="width:60%; padding-bottom: 250px"
class="bg-transparent text-center q-gutter-y-lg absolute-center ">
<q-carousel
animated
v-model="slide"
arrows
navigation
infinite
control-type="flat"
control-color="secondary"
class="bg-transparent text-center">
>
<template v-slot:navigation-icon="{ active, btnProps, onClick }">
<q-btn v-if="active" size="lg" icon="home" color="yellow" flat round dense #click="onClick" />
<q-btn v-else size="sm" :icon="btnProps.icon" color="white" flat round dense #click="onClick" />
</template>
<q-carousel-slide :name="1" >1</q-carousel-slide>
<q-carousel-slide :name="2">2</q-carousel-slide>
<q-carousel-slide :name="3">3</q-carousel-slide>
</q-carousel>
</q-card-section>
My script:
export default {
data() {
return {
slide : 1,
}
}
}
Your code is actually working, but you kind of mixed opening and closing tags.
There is no open tag for </q-card-section>
There is no closing tag for your leading <div>
The below code should work for you:
<div
style="width: 60%; padding-bottom: 250px"
class="bg-transparent text-center q-gutter-y-lg absolute-center"
>
<q-carousel
animated
v-model="slide"
arrows
navigation
infinite
control-type="flat"
control-color="secondary"
class="bg-transparent text-center"
>
<template v-slot:navigation-icon="{ active, btnProps, onClick }">
<q-btn
v-if="active"
size="lg"
icon="home"
color="yellow"
flat
round
dense
#click="onClick"
/>
<q-btn
v-else
size="sm"
:icon="btnProps.icon"
color="white"
flat
round
dense
#click="onClick"
/>
</template>
<q-carousel-slide :name="1">1</q-carousel-slide>
<q-carousel-slide :name="2">2</q-carousel-slide>
<q-carousel-slide :name="3">3</q-carousel-slide>
</q-carousel>
</div>
You should consider setting up auto formatting in your code editor/IDE to auto format your source code, if you are using VS Code you can do this quite easily: https://stackoverflow.com/a/29973358/13765033
This way, you shouldn't run into such trouble again (it also helps Stack Overflow users to read your source code).
We're using Quasar Framework with Vue.js. Consider the following q-card that is clickable:
<div class="q-pa-md row items-start q-gutter-md cursor-pointer">
<q-card class="my-card" clickable #click="GetSapRoster">
<q-card-section class="bg-primary text-white">
<div class="text-h6">SAP Truck Roster</div>
<div class="text-subtitle2">Get the truck planning</div>
</q-card-section>
</q-card>
</div>
How is it possible to achieve the same effect for a q-card as with a q-btn?
At the moment when using the class cursor-pointer it only fixes the mouse pointer but not the shading effect like a q-btn has.
You can use v-ripple + q-hoverable + q-focus-helper to simulate a button.
For example:
<q-card v-ripple class="my-box cursor-pointer q-hoverable">
<span class="q-focus-helper"></span>
<q-card-section>
...
</q-card-section>
</q-card>
General Question: I was wondering if I can concatenate class properties based on condition. See pseudo-code in the v-forline.
My use-case: I want to align all images that have an even index at the right side.
If I use flex flex-row-reverse for the parent section I get the images aligned on the right. But I don't know how to construct the class in such a way that I do not have to repeat the code for the child elements.
<section
v-for="(quote, index) of $frontmatter.quotes :class="lg:flex my-4 mx-12 overflow-auto" + {even: index % 2, odd: !(index % 2)}"
>
<img
class="quote-image right rounded-full h-64 w-64 flex items-center justify-center shadow-md mx-auto lg:ml-16 lg:mr-10 mt-12"
:src="$withBase(quote.image)"
/>
<div class="px-8 pt-6">
<h3 class="text-primary font-bold mb-4">
{{ quote.title }}
</h3>
<p>
{{ quote.text }}
</p>
</div>
</section>
And call the class extension something like:
.even {
flex-row-reverse
}
Currently,I use this structure - however, I am not happy with that, as I have to repeat my code for the child elements...
<section
v-for="(quote, index) of $frontmatter.quotes"
class= "my-16 mx-24 overflow-auto"
>
<div v-if="index % 2"
class="lg:flex flex-row-reverse">
<img
class="quote-image rounded-full h-64 w-64 flex items-center justify-center shadow-md mx-auto lg:ml-16 lg:mr-10 mt-12"
:src="$withBase(quote.image)"
/>
<div class="px-8 pt-6">
<blockquote>
<h2 class="text-primary font-bold mb-4">
{{ quote.title }}
</h2>
</blockquote>
<p class="quote-text">
{{ quote.text }}
</p>
</div>
</div>
<div v-else
class="lg:flex">
<img
class="quote-image rounded-full h-64 w-64 flex items-center justify-center shadow-md mx-auto lg:ml-16 lg:mr-10 mt-12"
:src="$withBase(quote.image)"
/>
<div class="px-8 pt-6">
<blockquote>
<h2 class="text-primary font-bold mb-4">
{{ quote.title }}
</h2>
</blockquote>
<p class="quote-text">
{{ quote.text }}
</p>
</div>
</div>
</section>
It should look something like:
First, just to clarify the question I'm trying to answer. Given the following code:
<div v-if="index % 2" class="lg:flex flex-row-reverse">
... children ...
</div>
<div v-else class="lg:flex">
... identical children ...
</div>
Is there a way to avoid the v-if and conditionally add the flex-row-reverse class instead?
You've got a number of options here. Firstly, the attributes class and style have special behaviour that allows you to specify both a bound and static copy of the same attribute. You can't do that for other attributes. e.g.
<div
class="lg:flex"
:class="{ 'flex-row-reverse': index % 2 }"
>
So the class lg:flex is added as a static class whereas, flex-row-reverse is added conditionally. Vue will combine them as appropriate to create the class attribute of the finished DOM nodes.
There are a number of other ways this could be written. Here are a couple to ponder:
<div :class="{ 'lg:flex': true, 'flex-row-reverse': index % 2 }">
<div :class="['lg:flex', { 'flex-row-reverse': index % 2 }]">
Arrays can be nested arbitrarily deep. Plain strings will be treated as classes to add. Objects will be treated as collections of conditional classes with the class name as the property name and the condition the property value.
All of this is using Vue's support for conditionally adding classes. However, a bound expression is just arbitrary JavaScript so you could apply the conditionality using normal JavaScript syntax instead of having Vue do it for you.
This is generally clunkier. This has to be a single expression so you can't use if/else. However, you can use ?: instead:
<div :class="'lg:flex' + (index % 2 ? ' flex-row-reverse' : '')">
The official documentation for these various ways to build classes is here:
https://v2.vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes
Since you are using classes, not <b-img> props, perhaps the class you need is float-right instead of right
<img v-if="index % 2"
class="quote-image float-right rounded-full h-64 w-64 shadow-md mx-auto lg:ml-16 lg:mr-10 mt-12"
:src="$withBase(quote.image)"
/>
i am using vs dropdown for notification and i need to trigger the function "abc()" when dropdown feather icon is clicked but on clicking the function is not triggered
<div class="bellicon" >
<feather-icon icon="BellIcon" class="cursor-pointer mt-1 sm:mr-6 mr-2" :badge="length1" >
</feather-icon>
</div>
<vs-dropdown-menu class="notification-dropdown dropdown-custom" #change="abc()">
<div class="notification-top text-center p-5 bg-primary text-white">
<h3 class="text-white">{{ unreadNotifications.length }} New</h3>
<p class="opacity-75">App Notifications</p>
</div>
<VuePerfectScrollbar ref="mainSidebarPs" class="scroll-area--nofications-dropdown p-0 mb-10" :settings="settings">
<ul class="bordered-items">
<li v-for="ntf in unreadNotifications" :key="ntf.index" class="flex justify-between px-4 py-4 notification cursor-pointer">
<div class="flex items-start">
<feather-icon :icon="ntf.icon" :svgClasses="[`text-${ntf.category}`, 'stroke-current mr-1 h-6 w-6']"></feather-icon>
<div class="mx-2">
<span class="font-medium block notification-title" :class="[`text-${ntf.category}`]">{{ ntf.title }}</span>
<small>{{ ntf.start }} {{ ntf.total }}{{ ntf.msg }}</small>
</div>
</div>
<small class="mt-1 whitespace-no-wrap">{{ elapsedTime(ntf.time) }}</small>
</li>
</ul>
</VuePerfectScrollbar>
<div class="
checkout-footer
fixed
pin-b
rounded-b-lg
text-primary
w-full
p-2
font-semibold
text-center
border
border-b-0
border-l-0
border-r-0
border-solid
border-grey-light
cursor-pointer">
<span>View All Notifications</span>
</div>
</vs-dropdown-menu>
</vs-dropdown>
the function abc() contains console.log but it is not working
The #change will not be invoked on click. This will only be invoked when an option is selected. Try changing it to #click. If you're having issues with the framework, you can make your own drop-down that will work. Something like that is done here: https://codepen.io/diemah77/pen/avabWG
Also, please keep in mind that VS is, as stated by their developers, not ready for production code, so there may be bugs in the framework itself that cause unexpected behavior even if your code is proper.
The truth is, Vuesax has a long way to go in terms of development. Components must be created, improved and fixed. For now, Vuesax should not be used for a real application. However, we are working very hard to achieve the stable version and have the strength to use it in any application.
vsDropdown component emits click event when you click on dropdown:
Source Code
So your code just needs a little bit of update:
First of all, you didn't add full code because vs-dropdown start tag is missing. That's where you should listen to click event.
So code looks like this:
<template lang="html">
<div class="examplex">
<!-- ATTENTION 👀 -->
<vs-dropdown #click="hello">
<a class="a-icon" href="#">
Dropdown hover
<vs-icon icon="expand_more"></vs-icon>
</a>
<vs-dropdown-menu>
<vs-dropdown-item>
Option 1
</vs-dropdown-item>
</vs-dropdown>
</div>
</template>
<script>
export default {
methods: {
hello() {
console.log('object');
}
}
}
</script>
<style lang="stylus">
.examplex
display: flex;
align-items: center;
justify-content: center;
.a-icon
outline: none;
text-decoration: none !important;
display: flex;
align-items: center;
justify-content: center;
i
font-size: 18px;
</style>
Notice that <vs-dropdown #click="hello"> that's your way out.
I hope this will resolve your issue. 🥂
There is a demo
http://jsfiddle.net/sqghggak/
When I click the checkbox or select it, it takes a shake. How can I fix it?
I tried to add overflow: scroll this to the .el-dialog__wrapper, but it was useless.
ok,I got the same error
<el-dialog title="权限设置" v-model="isShowPermission" style="overflow: scroll">
<div v-for="sub of permissions">
<el-checkbox #change="subchange(sub)" v-model="sub.ischeck">{{sub.subname}}</el-checkbox>
<div style="margin-left: 20px;" v-for="sub_ of sub.subpermission">
<el-checkbox #change="sub_change(sub,sub_)" v-model="sub_.ischeck">{{sub_.subname}}</el-checkbox>
<div style="margin-left: 20px;">
<el-checkbox v-for="sub__ of sub_.subpermission" #change="sub__change(sub,sub_,sub__)"
v-model="sub__.ischeck">{{sub__.subname}}
</el-checkbox>
</div>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button #click="isShowPermission = false" size="small">取 消</el-button>
<el-button type="primary" size="small" #click="handleSavePermission"
:loading="dialogloading">确 定</el-button>
</span>
</el-dialog>
The checkbox dialog is dynamically generated.When a chebox selected,it will shake a little.
However, 'overflow: scroll' solved the problem
try to add style below to avoid this problem, it works for me :)
.el-select .el-input {
overflow: scroll;
padding-bottom: 1px;
}