I am using this vue carousel package, and I am trying to set the icons as navigation buttons, like this:
<carousel
:perPage="1"
:navigationEnabled="true"
:navigationNextLabel="'<i class="material-icons">keyboard_arrow_right</i>'"
:navigationPrevLabel="'<i class="material-icons">keyboard_arrow_left</i>'"
>
<slide v-for="testimonial of testimonials" :key="testimonial.id">
<img v-if="testimonial.image" :src="testimonial.image.data.path" class="is-96x96">
<h4>{{ testimonial.title }}</h4>
<p>{{ testimonial.excerpt }}</p>
</slide>
</carousel>
But, for some reason, it is not working, I get this as the output in the html:
Here the props are not dynamic so the code should be
<carousel
perPage="1"
:navigationEnabled="true"
navigationNextLabel="<i class='material-icons'>keyboard_arrow_right</i>"
navigationPrevLabel="<i class='material-icons'>keyboard_arrow_left</i>"
>
<slide v-for="testimonial of testimonials" :key="testimonial.id">
<img v-if="testimonial.image" :src="testimonial.image.data.path" class="is-96x96">
<h4>{{ testimonial.title }}</h4>
<p>{{ testimonial.excerpt }}</p>
</slide>
</carousel>
Related
I have a conditionally-rendered notes and I want to delete specific note, depends on ID.
I have no problem with deleting without modal, but my problem is that I want to delete note only when modal is accepted.
There is modal component:
<DeleteModal
:modalVisible="modalVisible"
:restore="modalType"
#closeModal="modalVisible = false"
#deleteItem="deleteNote(note.id)"
#restoreItem="restore()"
/>
Delete method:
const deleteNote = (id) => {
Inertia.delete(route('notes.destroy', id));
getNotes();
};
and there is how I render notes:
<div class="my-4" v-for="note in notesForIssue" :key="note">
<div class="flex flex-row justify-between"></div>
<div class="bg-gray-100 w-full min-h-16 mt-2 rounded whitespace-normal">
<div class="px-8 py-4">
<p>{{ note.text }}</p>
<div class="flex flex-row items-center justify-between">
<div class="flex flex-row text-xs">
<span class="text-[#2563EB]">{{ note.updated_at }}</span>
<p class="ml-2">{{ __('history.by') }}</p>
<p class="font-bold ml-2 text-[#2563EB]">{{ note.updated_by }}</p>
</div>
<div #click="modalType=false; modalVisible=true;">
</div>
</div>
</div>
</div>
</div>
But I have no access to note.id here: #deleteItem="deleteNote(note.id)". Any ideas, how to solve this problem?
Try this approach.
When you click on the div, instead of set visibality of modal,
set selectedItem
set visibility
then you accept by modal, you have a `selectedItem' for delete
After delete, clear the selectedItem.
First the key attribute is not accpet object type variable. Second maybe you should check what is notesForIssue first ,then find out why you can't access note.id
I'm using vue-slick component but I have some problem with the v-for loop.
This is my code:
<slick
ref="slick"
:options="slickOptions"
class="float-left full-width slider-ingredients">
<div
v-for="ingredient in available_prots_source"
:key="ingredient.id"
#click="onSelectIngredient(ingredient.id, 'prots')"
class="slider-ingredient-item">
<div class="float-left ingredient-image">
<div class="content">
<img :src="ingredient.image" width="200" height="200" class="float-left cover-fit">
</div>
</div>
<h4 class="float-left full-width text-center ingredient-name">
{{ingredient.name}}
</h4>
<span class="float-left full-width text-center ingredient-details">
dettagli
</span>
</div>
</slick>
The problem is that my div is added outside the slick container. If I add a <div> just after the <slick> opening tag it render correctly but sees just one element even if my v-for add 4 or 5 elements.
What am I doing wrong?
How can I use slick with v-for loops?
from the official README (see method reInit in the README.md
// Helpful if you have to deal with v-for to update dynamic lists
this.$nextTick(() => {
this.$refs.slick.reSlick();
});
Vue-Owl-Carousel workign fine using the basic model :
<carousel>
<img src="https://placeimg.com/200/200/any?1">
<img src="https://placeimg.com/200/200/any?2">
<img src="https://placeimg.com/200/200/any?3">
<img src="https://placeimg.com/200/200/any?4">
</carousel>
But when i use a loop on , the Carousel broke and shows all slides in column.
<carousel> // Not Working
<img v-for="slide in slides" :src="getslide(slide)">
</carousel>
<carousel> // Not Working
<template v-for="slide in slides"><img :src="getslide(slide)"></template>
</carousel>
<carousel> // Not Working, the error is with v-for..
<img v-for="slide in slides" src="/slide.png">
</carousel>
Thank you if you can help.
You can try:
<div v-if="slides.length > 0">
<carousel>
<img v-for="slide in slides" :src="getslide(slide)">
</carousel>
</div
Are you using axios to get data to the slides array from the database?. If so the template of vue is being rendered before the data is received in the array causing the carousel not to work. you can re render the vue component and it will work. I had same problem and re-rendering the vue solved it.
<div v-if="slides.length > 0">
<carousel>
<img v-for="slide in slides" :src="getslide(slide)">
</carousel>
</div
code worked for me :)
I had the same problem, just check if your slides data is true
try this code :
<carousel v-if="slides">
<img v-for="slide in slides" :src="slide.png">
</carousel>
I want to implement a pagination component b-pagination w/bootstrap-vue but it will only display page one. I am following the setup in documentation but they only show an example using a table not an unordered list. I have :
<template>
<div class="results overflow-auto" v-cloak>
<h3>Search Results</h3>
<modal v-if="showModal" #close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<template v-slot:header>
<h1>NASA Image</h1>
</template>
<template v-slot:body>
<b-img class="modal-image" v-bind:src="attribute"></b-img>
</template>
</modal>
<!-- ======== Pagination Markup ============ -->
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
:items="items"
aria-controls="my-list"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<!-- ==========End Pagination Markup ======== -->
<!-- Limit output to 100 items -->
<ul
class="search-results"
id="my-list"
>
<li v-for="(item, index) in propsResults.items.slice(0,100)" :key="index">
{{ item.data[0].title}}
<span>
<b-img
thumbnail
class="thumbnail"
:src="item.links[0].href"
alt="Fluid image"
id="show-modal"
v-on:click="imageModal"
></b-img>
</span>
</li>
</ul>
</div>
</template>
and my javascript is :
export default {
name: "SearchResults",
props: ["propsResults"],
data() {
return {
showModal: false,
attribute: "",
perPage: 10,
currentPage: 1,
items: this.$props.propsResults.items
};
},
computed: {
rows() {
return this.$props.propsResults.items.length;
}
}
The pagination component is displaying all 100 items of items array on one page. I should also note I do not see the items array in the b-pagination props object per Vue dev tools in FF. is this normal? Any insight appreciated..
You should still be using currentPage to choose which items to show. The b-pagination component only changes that number.
Try using this line:
<li v-for="(item, index) in items.slice(10*(currentPage-1),10*(currentPage))" :key="index">
I am iterating through a list of props that consists of simple HTML markup
<div class="columns medium-4 large-4" v-for="keyOffer in keyOffers">
<p>{{ keyOffer.head }}</p>
<p>{{ keyOffer.sub }}</p>
</div>
and one of the props looks like this
keyOffers: [
{
id: 'offerSecond',
head: '4G network',
sub: 'Dedicated to bringing you the <span class="u_underline">best mobile service</span>
},
]
but in the output the <span> gets printed and not applied.
Any help?
Use v-html directive:
<div class="columns medium-4 large-4" v-for="keyOffer in keyOffers">
<p>{{ keyOffer.head }}</p>
<p v-html="keyOffer.sub"></p>
</div>
Ref: RawHTML