I have a dropdown made with vuetify with over 1000 items in it so I would like to put a scroll bar on the right of it. I've tried putting a max-height to the template but it won't work can anyone help please ?
<template>
<v-autocomplete
v-model="valuesActor"
:items="actorArray"
label="Name"
:search-input.sync="searchActor"
filled
clear-icon="mdi-close-circle"
clearable
multiple
background-color=#313131
:item-color="yellow"
item-text="color:var(--yellow)"
:menu-props="{maxWidth: 313}"
color="var(--yellow)"
>
<template v-slot:selection="{ item, index }">
<div v-if="valuesActor.length === 1">
<span v-if="index === 0 && valuesActor[0].length > 16">
{{ valuesActor[0].slice(0,16) }}...
</span>
<span v-if="index === 0 && valuesActor[0].length <= 16">
{{ valuesActor[0] }},
</span>
</div>
<div v-if="valuesActor.length === 2 ">
<span v-if="index === 0 && valuesActor[0].length <= 8">
{{ valuesActor[0] }}
</span>
<span v-if="index === 0 && valuesActor[0].length > 8">
{{ valuesActor[0].slice(0,8) }}...
</span>
<span v-if="index === 1 && valuesActor[1].length <= 8">
{{ valuesActor[1] }}
</span>
<span v-if="index === 1 && valuesActor[1].length > 8"
class="grey--text text-caption spanFilters"
>
+1 other
</span>
</div>
<div v-if="valuesActor.length > 2">
<span v-if="index === 0 && valuesActor[0].length <= 10">
{{ valuesActor[0].slice(0,10) }}
</span>
<span v-if="index === 0 && valuesActor[0].length > 10">
{{ valuesActor[0].slice(0,8) }}...
</span>
<span
v-if="index === 1"
class="grey--text text-caption spanFilters"
>
+{{ valuesActor.length - 1 }} other(s)
</span>
</div>
</template>
</v-autocomplete>
</template>
I've also tried looking at the v-scrolling component but it doesn't work either.
Related
I'm trying to do a dropdown menu and I used the slot on this page.
<v-list-item inactive :ripple="false">
<v-autocomplete
loading="true"
:menu-props="{ dark: true, maxWidth: 280 }"
v-model="valuesType"
:items="typeArray"
label="Category"
:search-input.sync="searchType"
class="settingsLstItm filtersPanel"
filled
dark
append-icon="mdi-chevron-down"
clear-icon="mdi-close-circle"
:background-color="backgroundDark3"
dense
clearable
multiple
:item-color="yellow"
item-text="color:var(--yellow)"
>
<template v-slot:prepend-item>
<v-list-item
ripple
#mousedown.prevent
#click="toggleType()"
>
<v-list-item-action>
<v-icon :color="valuesType.length > 0 ? 'var(--yellow)' : ''">
{{ iconType }}
</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
Select All
</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-divider class="mt-2"></v-divider>
</template>
<template v-slot:selection="{ item, index }">
<div v-if="valuesType.length === 1">
<span v-if="index === 0 && valuesType[0].length > 16">{{ valuesType[0].slice(0,16) }}... </span>
<span v-if="index === 0 && valuesType[0].length <= 16">{{ valuesType[0] }} </span>
</div>
<div v-if="valuesType.length === 2 ">
<span v-if="index === 0 && valuesType[0].length <= 8">{{ valuesType[0] }}, </span>
<span v-if="index === 0 && valuesType[0].length > 8">{{ valuesType[0].slice(0,8) }}..., </span>
<span v-if="index === 1 && valuesType[1].length <= 8">{{ valuesType[1] }} </span>
<span v-if="index === 1 && valuesType[1].length > 8">{{ valuesType[1].slice(0,8) }}... </span>
</div>
<div v-if="valuesType.length > 2">
<span v-if="index === 0 && valuesType[0].length <= 10">{{ item }}, </span>
<span v-if="index === 0 && valuesType[0].length > 10">{{ valuesType[0].slice(0,10) }}..., </span>
<span
v-if="index === 1"
class="grey--text text-caption spanFilters"
>
+{{ valuesType.length - 1 }} other(s)
</span>
</div>
</template>
</v-autocomplete>
</v-list-item>
Although, on my case, around the select ALL and the rest of the items, there are borders that I can't get removed. Does anyone know how to do that ? That's why it the divider doesn't take the whole space.
<b-tabs class="learning-center-tab px-0">
<b-tab :active="CategoryHash==Category.vSlug || (CategoryHash='' && index=='0')" v-for="(Category,index) in Categories" :set="cref = 'c'+(index+1)+'2'">
<template #title>
<span #mouseover="hoverFunc" #mouseleave="unhoverFunc"> {{ Category.vTitle }}{{ index }} </span>
</template>
<b-row align-h="end" class="sub_cat_select_box" :style="{ bottom: lcTabBoxBottom }" v-if="Category.sub_category.length>0">
<b-form-select v-model="selected">
<option value="null">Pet Type</option>
<option v-for="(selectOption, indexOpt) in Category.sub_category" :key="indexOpt" :value="selectOption.iCategoryId">
{{ selectOption.vTitle }}
</option>
</b-form-select>
</b-row>
<div #wheel.prevent="wheelItBetter($event,cref)">
<VueSlickCarousel class="LC-slider" v-bind="BannerImage" #reInit="onInitCarousel" :asNavFor="$refs.cref">
<div class="slick-slider-item">
<div class="slid-img-box" :style="{backgroundImage: 'url(' + Category.vImagePath + ')'}"></div>
<div class="lc-caption" :style="{ width: captionWidth }">
<h2>DigyPet Learning Center</h2>
<h5>Resources and tips to help you be the best <br /> pet parent you can be.</h5>
</div>
</div>
</VueSlickCarousel>
<VueSlickCarousel class="LC-slider-nav-thumbnails" v-bind="IconImage" :ref="cref">
<div class="pl-4" v-for="(LearningCenter,index1) in Category.learning_center">
<b-img :src="LearningCenter.vImagePath" rounded fluid alt="Responsive image"></b-img>
<p #mouseover="hoverFunc" #mouseleave="unhoverFunc">
<NuxtLink :to="'/learning-center/'+LearningCenter.vSlug">
{{ LearningCenter.vTitle }}
</NuxtLink>
</p>
</div>
</VueSlickCarousel>
</div>
</b-tab>
This is my carousel code and below is the wheelItBetter function
wheelItBetter(event, ref) {
console.log(ref);
if (event.deltaY < 0) {
this.$refs[ref].prev();
} else {
this.$refs[ref].next();
}
}
On mouse wheel event below error is showing::
TypeError: this.$refs[ref].next is not a function
at VueComponent.wheelItBetter (index.vue?93c2:306)
at wheel (index.vue?055e:199)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at HTMLDivElement.invoker (vue.runtime.esm.js?2b0e:2179)
at HTMLDivElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)
Suggest something. i tried various ways to resolve this. but couldn't find any solution.
My question is if I am doing the below code correctly or is there a better way? I want to handle the change in any input values.
I have an object of options:
customOptions: {
1:"test 1",
2:"test 2",
3:"test 3",
}
and I am showing them in the template like this:
<div class="custom_options">
<div
class="row-fluid flex form-row"
v-for="(option, index) in customOptions"
:key="index"
>
<span>{{ index }}</span>
<span>
<input :value="option" :id="index" #change="handleChange" />
</span>
</div>
</div>
and finally my method:
handleChange(event) {
Vue.set(this.customOptions, event.target.id, event.target.value)
},
You could just use v-model like <input v-model="customOptions[index]"/> :
<div
class="row-fluid flex form-row"
v-for="(option, index) in customOptions"
:key="index"
>
<span>{{ index }}</span>
<span>
<input v-model="customOptions[index]"/>
</span>
</div>
First of all, I'm very new to Vue so, sorry if the answer is very obvious. I have a list of elements that I'm rendering with Vue.js, some of these items have a "Sold" attribute and when they have it, the layout has to change a bit, so far this works well:
<template v-if="property.sold === 'sold'">
<span class="property-item-sold">{{ property.sold }}</span>
<div class="item-meta">
<h3 class="property-item-title">{{ property.name }}</h3>
<div class="item-meta-group">
<div class="location"><i class="fas fa-map-marker-alt"></i> {{ property.location | cityState }} {{ property['property-state'][0].name }}</div>
<div class="size">{{ property.surface.value | numberFormat }} {{ property.surface.unit }}</div>
</div>
</div>
</template>
<template v-else>
<div class="property-item-offering-type">For {{ property['offering-type'][0].name }} </div>
<div class="item-meta">
<h3 class="property-item-title">{{ property.name }}</h3>
<div class="item-meta-group">
<div class="location"><i class="fas fa-map-marker-alt"></i> {{ property.location | cityState }} {{ property['property-state'][0].name }}</div>
<div class="size">{{ property.surface.value | numberFormat }} {{ property.surface.unit }}</div>
</div>
<a :href="property.url" class="btn btn--green">View Details</a>
</div>
</template>
But I'm repeating a lot of code, is there a way to DRY this conditional?
Something like this:
<template>
<span v-if="property.sold === 'sold'" class="property-item-sold">{{ property.sold }}</span>
<div v-else class="property-item-offering-type">For {{ property['offering-type'][0].name }} </div>
<div class="item-meta">
<h3 class="property-item-title">{{ property.name }}</h3>
<div class="item-meta-group">
<div class="location"><i class="fas fa-map-marker-alt"></i> {{ property.location | cityState }} {{ property['property-state'][0].name }}</div>
<div class="size">{{ property.surface.value | numberFormat }} {{ property.surface.unit }}</div>
</div>
<a v-if="property.sold !== 'sold'" :href="property.url" class="btn btn--green">View Details</a>
</div>
</template>
I am pretty new with Vue.js, I have built a filtering system which filters recipes based on category, main ingredient and product selection.
I have added a pagination for every 9 recipes, but when I tried to filter recipes on 2nd or 3rd page, filter doesn't show any recipe item. This is how display recipes:
<section class="grid grid--recipes">
<div class="container">
<h3 v-if="filteredItems.length === 0">{{ labels.noMatch }}</h3>
<div v-for="recipe in paginatedData" class="recipe-card">
<a :href="`${appUrl}/recipe/${recipe.slug}`">
<div class="recipe-card__image">
<div></div>
<!-- Temp fix for square images. needs a better way to handle metadata is null-->
<img v-if="recipe.main_image"
:src='twigConditionals.useSquare ? (recipe.main_image.metadata ? recipe.main_image.metadata.crops.square.url : recipe.main_image.url) : recipe.main_image.url'>
<img v-if="!recipe.main_image" :src='placeholderImage'>
</div>
<div class="recipe-card__content">
<div class="recipe-card__title">
<h3 class="type--header-g">{{ recipe.name }}</h3>
</div>
</div>
</a>
</div>
</div>
</section>
and this is how I added pagination based on this tutorial https://medium.com/#denny.headrick/pagination-in-vue-js-4bfce47e573b
<section class="pagination">
<div class="container">
<ol>
<li v-if="pageCount > 1">
<button class="page-control" :disabled="currentPage === 0" #click="setPage(0)">
«
</button>
</li>
<li v-if="pageCount > 0">
<button class="page-control" :disabled="currentPage === 0" #click="setPage(currentPage-1)">
‹
</button>
</li>
<li v-for="number in pageCount+1">
<button :class="{ 'is-current-page': currentPage === number - 1 }"
#click="setPage(number-1)">{{ number }}
</button>
</li>
<li v-if="pageCount > 0">
<button class="page-control" :disabled="currentPage === pageCount"
#click="setPage(currentPage+1)">
›
</button>
</li>
<li v-if="pageCount > 1">
<button class="page-control" :disabled="currentPage === pageCount"
#click="setPage(pageCount)">
»
</button>
</li>
</ol>
</div>
</section>
So I slice all the recipes like this in computed section:
pageCount() {
let l = this.filteredItems.length,
s = this.size;
return Math.floor(l / s);
},
paginatedData() {
const start = this.currentPage * this.size,
end = start + this.size;
return this.filteredItems.slice(start, end);
}
I believe because I slice recipes, filter doesn't apply that( I might be completely wrong) but I am not sure how I could paginate and apply general filter on each page. Any help would be highly appreciated?