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
您可以将数据存储在$ 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>

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

1 个答案: