对不起,我想将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不是任何回复。
我该怎么办,请帮助我,谢谢!
答案 0 :(得分:1)
不确定你想要追加,但这里有类似的东西。
v-if
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>