javascript - 如何附加 v-on :click event to html element

Question

打扰一下，我想将 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没有任何反应。

我该怎么办，请帮帮我，谢谢!

Answer 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>