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.

app.vue

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