打扰一下,我想将 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没有任何反应。
我该怎么办,请帮帮我,谢谢!
最佳答案
不确定您要追加,但这里有类似的内容。
- 您可以通过
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>
关于javascript - 如何附加 v-on :click event to html element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48163595/