Question

在开发vue的模板onclick事件时遇到一些问题。因此，当我单击文件时，我可以打开模块，我已经看到了一些带有本机的样品。不幸的是，仍然不适合我的代码，也无法进入控制台。这是我的代码：

我尝试添加本机但在控制台日志上仍然没有响应。

html

<div id="app">
<notification :notice="notice" ></notification>
</div>

js

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. ')
      }
}
});

Answer 1

您的代码存在一些问题：

showFile应该在通知组件中定义。无法到达父showFile方法

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. ')
        }
      }
    });

您不应在儿童部分（More information）中突变notice道具

模板组件上的vuejs onclick行为

1 个答案: