Question

我制作了一个附加一些＆＃39; a＆＃39;为了使用户能够从固定列表中选择正确的值（太多选项，因此在用户写了3个字母或更多字母后会出现选项）。

标记到＆＃39; div＆＃39;

我有一个隐藏字段，使用用户从列表中选择的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
            }
        }
    }
});

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

1 个答案: