javascript - 添加 Javascript 数组到表单输入

Question

我正在构建一个群组邮件系统，前端使用 VueJS 和 jQuery，后端使用 Laravel 5。

我正在使用 AJAX 调用来检索基于组、代理机构或所有事件用户的用户列表。然后，用户可以根据 DOM 中的这些结果删除地址(VueJS data)并手动添加新地址。

该表单包含一个文件，因此我无法(或出于兼容性考虑而不想)使用 AJAX 调用发送表单数据。问题是，当用户提交表单时，我需要将电子邮件地址列表与表单一起发送。

这是 JavaScript。最相关的部分是 serializeRecipients 方法，我将每个电子邮件地址附加到隐藏的表单字段:

var vm = new Vue({
    el: '#emailContainer',
    data: {
        recipients: [
            {
               name: "Joe Smith",
               email: "joe@demo.com"
            }
        ],
        individualRecipients: [],
        manualRecipient: null,
        validation: {
            email: true
        }
    },

    methods: {
        //
        serializeRecipients: function() {
            var recipientAddresses = [];
            var individualRecipientAddresses = [];
            $.each(this.recipients, function (k, recipient) {
                recipientAddresses.push(recipient['email']);
            });
            $.each(this.individualRecipients, function(k, recipient) {
                individualRecipientAddresses.push(recipient);
            });

            $("#recipientsInput").val(recipientAddresses);
            $("#individualRecipientsInput").val(individualRecipientAddresses);
        }
    }
});

在表单元素上，我使用v-on="submit:serializeRecipients"。这会生成以下表单输出:someone@demo.com，someoneelse@demo.com，然后我使用 PHP 的 explode() 函数将其转换为数组。

这一切都有效，但我想知道是否有更好的方法来实现这一点。任何建议将不胜感激!

Answer 1

您可以将数组连接到字符串中，然后在服务器上解析它。

$("#recipientsInput").val(recipientAddresses.join(','));
$("#individualRecipientsInput").val(individualRecipientAddresses.join(','));

所以:

['me@somewhere.com', 'you@somewhereelse.com', 'him@somewhere.com']

会变成:

'me@somewhere.com,you@somewhereelse.com,him@somewhere.com'

然后在服务器上您可以用逗号分隔该字段。