Render ListView with hyper link navigation in Vue ListView component

19 Feb 20254 minutes to read

We can use an anchor tag along with the href attribute in our ListView’s 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 a 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 setup>

import { ListViewComponent as EjsListview } from "@syncfusion/ej2-vue-lists";
import { createApp } from "vue";

var listVue = createApp().component("demo", {
  template: `<a target='_blank' v-bind:href='data.url'></a>`,
  data() {
    return {
      data: {}
    };
  }
});

const 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' },
]
const anchortemplate = () => {
  return { template: listVue };
}

</script>
<template>
  <div id="sample">
   <ejs-listview id='List' :dataSource='data' headerTitle='Search engines' showHeader='true' :template='anchortemplate'>
   </ejs-listview>
 </div>
</template>

<script>

import { ListViewComponent } from "@syncfusion/ej2-vue-lists";
import { createApp } from "vue";

var listVue = createApp().component("demo", {
 template: `<a target='_blank' v-bind:href='data.url'></a>`,
 data() {
   return {
     data: {}
   };
 }
});

export default {
name: "App",
components: {
"ejs-listview":ListViewComponent
},

 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>
<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>