zoukankan      html  css  js  c++  java
  • 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>
    
  • 相关阅读:
    FJUT3260
    Codeforces Round #387 (Div. 2)
    poj 1375
    试题 历届试题 蚂蚁感冒(模拟)
    丢手绢(尺取)
    「金」点石成金(dfs)
    小A买彩票(dp)
    不平行的直线
    最少交换次数
    第k小数(桶排序)
  • 原文地址:https://www.cnblogs.com/500m/p/15619042.html
Copyright © 2011-2022 走看看