Encountering an issue while developing Vue's template onclick event. Trying to open a module when clicking a file, I have looked at some samples with native code, but it does not quite fit into my code and I cannot reach the console. Here is my code:
Added native but still no response in the console log.
HTML
<div id="app">
<notification :notice="notice" ></notification>
</div>
JavaScript
const myTest = [
{
title: 'mamam',
body: 'Mamamia',
type: 'success'
},{
title: 'Perlu',
body: 'Hati-hati sedang ada perbaikan',
type: 'Danger'
},{
title: 'Notification',
body: 'Repellendus quod aliquid ad, quae harum similique facilis aliquam. Dolorum deserunt alias officia atque dolor, voluptas harum. Inventore reiciendis reprehenderit provident!',
type: 'primary'
}
];
function randomInt(min, max) {
let rand = min - 0.5 + Math.random() * (max - min + 1);
rand = Math.round(rand);
return rand;
};
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]
},
},
});
setInterval(() => ( vm.$data.index = randomInt(0, 6) ), randomInt(100, 10000) );
const vm = new Vue({
el: "#app",
data: {
index: 0
},
computed: {
notice() {return myTest[this.index]}
},
methods: {
showFile(e) {
console.log(' show file was clicked. ')
}
}
});