VUE字符串模板@click失效

因为字符串模板不能被vue所渲染，所以这种方式行不通。

 

可采用组件的方式

父组件

<template>
  <div id="app">
    <My v-for="(v,index) in commentList" :key="index" :commentId="v"/>
  </div>
</template>

<script>
import My from './components/My.vue'
export default {
  name: 'App',
  components:{
    My
  },
  data() {
    return {
      commentList:[
        1,2,3,4,5
      ]
    }
  },
  methods: {
    
  },
}
</script>

 

子组件

<template>
  <div id="My">
    <div class="comment-wrap">
      <div class="comment">
        用户1 : 评论内容 <button @click="testOut()">回复评论</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["commentId"],
  data() {
    return {
        commentId2:null
    };
  },
  methods: {
    testOut() {
        console.log(this.commentId2);
    },
  },
  watch: {
    commentId: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.commentId2 = newVal; 
        }
      },
      immediate: true,
      deep: true, //deep，默认值是 false，代表是否深度监听。
    },
  },
};
</script>