Vue - Define method in Vue instance example

0 votes
3,026 views
added Oct 22, 2019 in Vue by LC Marshal Captain (25,790 points)
<template>
  <ol class="breadcrumb">
   <li class="breadcrumb-item" v-for="(item, index) in list"
   ><span class="active" v-if="isLast(index)">{{ showName(item) }}</span>
      <router-link :to="getPath(item.path)" v-else>{{ showName(item) }}</router-link>
   </li>
  </ol>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  methods: {
    isLast (index) {
      return index === this.list.length - 1
    },
    getPath(path){
      if(path == ""){
        return '/dashboard';
      }else{
        return path;
      }
    },
    showName (item) {
      if (item.meta && item.meta.label) {
        item = item.meta && item.meta.label
      }
      if (item.name) {
        item = item.name
      }
      return item
    },
    showPopup(item){
      if(item.name == "About us"){
        window.open("https://testsite.com/about-us", '_blank');
      }
      else if(item.name== "Message us") {
        window.open("https://testsite.com/message-us", '_blank');
      }   
      else if(item.name== "View Product") {
        window.open("https://testsite.com/products", '_blank');
      }   
      else if(item.name== "Create New item"){
        window.open("https://testsite.com/create-product", '_blank');
      }
    }
  }
}
</script>

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...