[Vuejs]-Vuejs onclick behaviour on template's component

by

0👍

✅

There are some issues with your code:

  1. showFile should be defined in notification component. It can’t reach parent showFile methods
Vue.component('notification', {
      template: 
      `
      <div class="Notification" v-show="notice">
        <div class="notice" :class="notice.type">
          <svg @click="notice=!notice" class="close" width="20" height="20" viewbox="0 0 20 20" stroke-width="2">
            <line x1="3" y1="3" x2="17" y2="17"></line>
            <line x1="3" y1="17" x2="17" y2="3"></line>
          </svg>
          <div class="title">
            <i class="type" :class="notice.type">{{notice.type}}</i>
            {{notice.title}}
          </div>
          <div class="body">
            <i class="type" :class="notice.type">{{notice.body}}</i>
            <a @click.native="showFile"> File </a>
          </div>
        </div>
      </div>
      `,
      props: {
         notice: {
          type: [Object, Array]
        },
      },
      methods: {
        showFile(e) {
          console.log(' show file was clicked. ')
        }
      }
    });
  1. You should not mutate notice props in children component (More information)

Leave a comment