VueJS onclick on附加元素

时间:2017-10-15 13:36:32

标签: javascript vue.js vuejs2

有人可以建议如何在VueJS上点击附加的动态元素吗?

工具提示按钮未触发vuejs const myVue = new Vue({ el: '#vue', methods: { popAlert: function() { alert('clicked'); } } }); $(function() { $('#calendar').fullCalendar({ defaultDate: '2017-10-12', editable: true, eventLimit: true, // allow "more" link when too many events events: [ { title: 'All Day Event', start: '2017-10-01' }, { title: 'Long Event', start: '2017-10-07', end: '2017-10-10' }, { id: 999, title: 'Repeating Event', start: '2017-10-09T16:00:00' }, ], eventRender: function(event, element, view) { let htmlText = `<div class="ui tooltip"> <h3>Tooltip title</h3> <button type="button" class="ui mini button" @click="popAlert">Delete</button> </div>`; $(element).popup({ inline: false, on: 'click', exclusive: true, hoverable: true, html: htmlText, context: '#vue', }); } }); }); 方法。

    
retrofit = new Retrofit.Builder()
                .addCallAdapterFactory(RxJava2CallAdapterFactory.create())
                .addConverterFactory(GsonConverterFactory.create())
                .baseUrl(BASE_URL)
                .build();

public void getAllEvent(){

        EventService eventService = retrofit.create(EventService.class);
        Single<List<Event>> eventsAsSingle = eventService.getEvents();

        eventDisposableSingleObserver = eventsAsSingle
                .subscribeOn(Schedulers.io())
                .observeOn(AndroidSchedulers.mainThread())
                .subscribeWith(new DisposableSingleObserver<List<Event>>() {
                    @Override
                    public void onSuccess(@NonNull List<Event> events) {

                        //eventDataList is type of ArrayList<Event> 
                        eventDataList.addAll(events);
                        EventListAdapter listAdapter = new EventListAdapter(MainActivity.this,eventDataList);
                        recyclerView.setAdapter(listAdapter);
                        recyclerView.addItemDecoration(new RecyclerViewDividerVertical(5));
                        recyclerView.setLayoutManager(new LinearLayoutManager(MainActivity.this));

                        //TODO: ADD data into SQLight
                        Intent intent = new Intent(MainActivity.this,EventCacheService.class);
                        intent.putParcelableArrayListExtra("event_data",eventDataList);
                        startService(intent);

                    }

                    @Override
                    public void onError(@NonNull Throwable e) {
                        Log.d(TAG, "on Error : " + e.getMessage());
                    }
                });
    }

https://codepen.io/tonoslfc/full/bomqWR/

1 个答案:

答案 0 :(得分:2)

您可以将htmlText包装在另一个Vue组件中,复制父方法,然后$mount将此组件放入其中onCreate的弹出窗口中。

查看我的笔了解详情https://codepen.io/bsalex/pen/EwdQEy