如何附加v-on:单击事件到html元素

时间:2018-01-09 07:53:14

标签: javascript jquery vue.js

对不起,我想将vue.js事件和html附加到html元素。

但是,Append不能使用vue.js事件(OpenTabDropdown) (ps:我使用jquery追加函数)

Vue.js

const app = new Vue({
        el: '#app',
        methods:{
            Append(){
                var moreArray = new Array();
                moreArray.push("<a v-on:click='OpenTabDropdown($event)' href='javascript:;'><i class='fa fa-angle-double-down none' aria-hidden='true'></i> </a>");
                $('.show_wrap').append(moreArray);
            },
            OpenTabDropdown(event){
               $(event.target).find('.fa-angle-double-down').toggleClass('none');
            }
        },
});

HTML

<div ip="app">
<div class="show_wrap">
</div>
</div>

喜欢这个顶级代码。

我希望moreArray附加到div(show_wrap)。

但OpenTabDropdown不是任何回复。

我该怎么办,请帮助我,谢谢!

1 个答案:

答案 0 :(得分:1)

不确定你想要追加,但这里有类似的东西。

  • 您可以通过v-if
  • 添加/删除html部分
  • 您可以将数据存储在$ data
  • 您可以使用自己的方法切换html部分。

const app = new Vue({
  el: '#app',
  data: function(){
    return {
     isDropdownEnabled: false,
     yourData: [
      {name: 'John'},
      {name: 'Sarah'}
     ]
    }
  },
  methods:{
    toggleDropdown(event){
       this.$set(this.$data, 'isDropdownEnabled', !this.isDropdownEnabled)
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>

<div id="app">
  <div class="my-data" v-if="isDropdownEnabled">
    <div v-for="data in yourData">{{data.name}}</div>
  </div>
  <hr />
  <a @click.prevent="toggleDropdown" href="">
    <i class='fa fa-angle-double-down none' aria-hidden='true'></i>
    toggle dropdown
  </a>
</div>