Render listview with hyper link navigation in Vue Listview component
16 Mar 20233 minutes to read
We can use anchor
tag along with href
attribute in our ListView template
property for navigation.
var listVue = Vue.component("demo", {
template: `<a target='_blank' v-bind:href='data.url'></a>`,
data() {
return {
data: {}
};
}
});
In the below sample, we have rendered ListView
with search engines URL.
<template>
<div id="sample">
<ejs-listview id='List' :dataSource='data' headerTitle='Search engines' showHeader='true' :template='anchortemplate'>
</ejs-listview>
</div>
</template>
<style>
#List {
max-width: 300px;
margin: auto;
border: 1px solid #dddddd;
border-radius: 3px;
}
#List a {
text-decoration: none;
}
#List .e-list-header {
background: rgb(2, 120, 215);
color: white;
font-size: 19px;
font-weight: 500;
}
</style>
<script>
import Vue from "vue";
import { ListViewPlugin } from "@syncfusion/ej2-vue-lists";
Vue.use(ListViewPlugin);
var listVue = Vue.component("demo", {
template: `<a target='_blank' v-bind:href='data.url'></a>`,
data() {
return {
data: {}
};
}
});
export default {
data: function() {
return {
data: [
{name: 'Google', url: 'https://www.google.com'},
{name: 'Bing', url: 'https://www.bing.com' },
{name: 'Yahoo', url: 'https://www.yahoo.com'},
{name: 'Ask.com', url: 'https://www.ask.com'},
{name: 'AOL.com', url: 'https://www.aol.com'},
],
anchortemplate: function () {
return { template : listVue};
},
};
},
}
</script>