让 Vue 知道使用 jQuery 更改的数据

Question

我制作了一个小脚本，将一些'a'标签附加到'div'，以使用户能够从固定列表中选择正确的值（选项太多，所以选项会在用户使用后出现写 3 个字母或更多）。

我有一个隐藏字段，它使用用户从列表中选择的 ID 进行更新。

我正在使用 jQuery 添加一个 onclick 事件。

我的问题是 Vue 不知道 jQuery 为隐藏字段设置的值，我不知道如何修复它。

代码如下：

$('#form_product').on("click", ".choiceOptions a-participant", function (e) {

var id              = $(this).data("id"),
    participant     = $(this).data("participant"),
    inputId         = $(this).data("visualcontainer"),
    $visualInput    = $('#' + inputId);

// Set values for the shown input and the hidden input
$visualInput.siblings('input').val(id);
$visualInput.val(participant);

// Stop showing the participants
$visualInput.siblings('div').css('display', 'none');
})

vm = Vue.component('input-participant', {
template: '#input_participant',
props: ['id', 'label', 'value', 'maxlength', 'required', 'readonly'],
methods: {
    findParticipants: function (visualId) {
        var visualContainer = $('#' + visualId);
        var value = visualContainer.val();
        var list = visualContainer.siblings('div');

        if (value.length > 0 && value.length < 3) {
            list.html('<div>Keep typing...</div>');
            this.toggleParticipants(true, visualId);
        }
        else if (value.length > 2) {

            this.toggleParticipants(true, visualId);

            list.html('<div>Loading...</div>');
            this.$http.get(hazaar.url('api', 'participantLookup') + '?name=' + value
            ).then(function (response) {
                list.html('');
                $.each(response.data, function (key, value) {
                    list.append('<a-participant data-id="' + value.data.id + '" data-participant="' + value.data.participantName + '" data-visualcontainer="' + visualId + '">' + value.data.participantName + '</a-participant>');
                });
            });
        }
        else {
            this.toggleParticipants(false, visualId);
        }
    },
    toggleParticipants: function (doShow, visualId) {
        var $visualInputOptionsContainer = $('#' + visualId).siblings('div');
        if (doShow) {
            if ($('#' + visualId).val().length > 0) {
                $visualInputOptionsContainer.css('display', 'block');
            }
        }
        else {
            // A bit of a hacky way to do it, but it seems to work fine so far.
            window.setTimeout(function () {
                $visualInputOptionsContainer.css('display', 'none');
            }, 150);
        }
    }
}
});

Answer 1

var vm = new Vue({
    el:"#form_product"},
    data:{
        list:[]
    })，
    $(el).click（
        function（）｛
            vm.list=[]
})

比如这里需要动态改变图片，可以使用vue的代理，而不是jQuery。

<div id="page" @click="proxyImage">
</div>

脚本

  var vm = new Vue({
    el: '#page',
    data: {
        topic: {}
    },
    method: {
        proxyImage: function (e) {
            if (e.target.tagName.toUpperCase() === 'IMG') {
                // do something
            }
        }
    }
});