This is in reference to a project using VueJS 2.0 and Swiper v8.3.2
If I had a swiperSlide that looks similar to this:
<template>
<a
:href="url"
:title="title"
>{{ title }}</a>
</template>
How would I enable a click-through to _self, _target etc.? The click is being captured by Swiper, even adding a #click function won't work.
Related
Im using Vue and Ionic, this is my code:
I have a page where I have this cards:
<yt-course-card
v-for="lesson in ytTheme.lessons"
:key="lesson"
:name="lesson.group_name"
:lessons="lesson.group_lessons"
></yt-course-card>
in this card i have this:
<ion-card>
<ion-card-header>
<ion-card-title>{{ name }}</ion-card-title>
</ion-card-header>
<ion-card-content>
<ul>
<li v-for="lesson in lessons" :key="lesson">{{ lesson.name }}</li>
</ul>
</ion-card-content>
</ion-card>
This all works and does what I want it to, but I would like this li to be link to other page. I have this other page ready, but I dont know how should I write my router-link, because if I use router-link in -li- element, it doesnt work.
This is how my route-link should look like, but I dont know where or how to put it, so my li element is link to other page.
:router-link="`/yt-course/${lesson.slug}`"
In vue router router-link is not an attribute but a component. To navigate to other pages use the to attribute like show below:
<li :to="{ mame: 'yourRouteName' }">Link to a page</li>
This works fine and all, but it is the best practice to use Vue router's build-in component, like shown below:
<li>
<router-link :to="{ mame: 'yourRouteName' }">Link to a page</router-link>
</li>
i'm trying to display example Vue component's within my documentation, however Vue is also recognizing the template within my Vue component.
vehicle-documents is not a registered component, and is also put into the following code:
Vue.config.ignoredElements = ['slide', 'slider', 'vehicle-documents'];
So Vue is ignoring the component itself:
If you want the modal make sure you add the click event and call the `open` function, and pass the `document` into this function call, as seen below.
```html
<vehicle-documents class="app" vehicle-id="">
<template v-slot:default="slotProps">
<button #click="slotProps.open(slotProps.document)">
{{ slotProps.document.name }}
</button>
</template>
</vehicle-documents>
```
How can I make Vue ignore the template block? I need Vue on this page, so it's not a simple case of just removing Vue.
Try this, add v-pre and type="text/x-template"
<vehicle-documents class="app" vehicle-id="">
<template v-pre type="text/x-template">
<button #click="slotProps.open(slotProps.document)">
{{ slotProps.document.name }}
</button>
</template>
</vehicle-documents>
So I have a list of objects each rendered in a list. At the same time, each list element should redirect to a specific route on click:
<template>
<b-container>
<h1 v-if="error">{{error}}</h1>
<b-table
sort-icon-left
borderless
outlined
v-else-if="coins"
#row-clicked="coinRowClickHandler"
selectable
small
:items="coins"
:fields="fields">
<template #cell(coin)="data">
<NuxtLink :to="`/${data.item.name}/dashboard`"><img :src="data.item.image" width="25" height="25"><b>{{data.item.name}}</b></NuxtLink>
</template>
<template #cell(current_price)="data">
{{ formatDollar(data.item.current_price, 20, 2) }}
</template>
<template #cell(price_change_percentage_24h)="data">
{{ formatPercent(data.item.price_change_percentage_24h) }}
</template>
<template #cell(market_cap)="data">
{{ formatDollar(data.item.market_cap, 20, 0) }}
</template>
</b-table>
<b-spinner v-else/>
</b-container>
</template>
As you can see, there is a click handler for each row click, the handler is the following:
coinRowClickHandler: function(event) {
console.log(event)
this.$router.push(`/${event.name}/dashboard`)
}
Now I am unsure which navigation method to use; whether using <NuxtLink> or programatically via this.$router.push.
The main reason I would keep the programatic navigation is simply because I do not know any other way to trigger page change on row click. On the other hand, I am afraid I would lose SEO advantages of <NuxtLink> Tag.
<nuxt-link> is basically a <router-link>, so it should have 0 benefit SEO-wise over the Vue variant.
As of what to use in your case, it's more a matter of button vs a:href. If you want to navigate to another page, it should be a link.
More details in this article: https://www.smashingmagazine.com/2019/02/buttons-interfaces/
Other advantages when using nuxt-link Nuxt can automatically prefetch pages with the prefetchLinks and prefetchPayloads options.
prefetchlinks
prefetchpayloads
I am trying to get all images for a category using Vue
<div class="col-md-12 col-sm-2 p-2">
<a v-on:click="onCategoryManageImageClick($event)" data-target="#location-
category-images">
</span>
</a>
</div>
So the event onCategoryManageImageClick ($event) does not work, if I am adding a html block and then click on get image button.
this is index.js
methods:{
onImagesTabClick(){
this.$root.$emit('activated-tab:location-images');
},
onCategoriesTabClick(){
window.j1App.eventBus.$emit("j1-location-image-list:shown");
},
onCategoryManageImageClick: function(event) {console.log('working event..');
event.preventDefault();
window.j1App.eventBus.$emit("j1-location-category-image-
list:shown",event.currentTarget.id);
}
}
So basically it need to to work like we do in jQuery
$(document).on('click',function{
})
So it works either page load or if adding any new html element on DOM. same I want in Vue.
You cannot alter the Vue template outside of Vue. That won't work. Vue compiles the template once when starting up and adds the event listeners to the rendered elements. If you add elements afterwards, Vue will not know about them.
The correct way of doing this would be to add those new elements in Vue.
<div
class="col-md-12 col-sm-2 p-2"
v-for="item in items"
:key="item.id"
>
<a
v-on:click="onCategoryManageImageClick($event, item)"
data-target="#location-category-images"
>
</a>
</div>
See https://v2.vuejs.org/v2/guide/list.html for documentation. In this case you need the items array variable in data and add more array elements to it, if you need more links.
Try raplacing your a tag with p
<div class="col-md-12 col-sm-2 p-2">
<p v-on:click="onCategoryManageImageClick" data-target="#location-
category-images">
</p>
</div>
According to the Vue documentation I should be able to add the v-if condition to the <template> tag:
<template v-if="false">
<div>Invisible text</div>
</template>
But this will not hide the element, however it does work when added to the child element:
<template>
<div v-if="false">Invisible text</div>
</template>
Any suggestions?
I'm including the template in another .vue file:
<template>
<div id="app">
<H1 class= "main-title">Title</H1>
<span class="components">
<testtemplate></testtemplate>
</span>
</div>
</template>
The template tag of a single-file component is not rendered by Vue like normal <template> tags. It is simply one of the placeholders, along with <script> and <style> that vue-loader uses to build the component. The root element of that template is what will be the root in the component.
But, even if it worked the way you want, there would be no difference between your first and second example. Using v-if on the root will prevent the entire component's template from rendering if set to false.
Had this problem with VUE3. Using SFC just nest tag template inside another tag template :
<template>
<template v-if="false">
You won't see this
</template>
</template>