Question

我目前正在尝试弹出一个窗口，让用户应该在其中填写他或她的个人信息，如下面的代码和所附的图像所示。

uid

这样，我可以让用户填写多个字段，但是我想以“对象”的形式存储“地址”，而不仅仅是字符串。

member

我设法将6个输入之一更改为“选择”类型，而不是仅允许用户写一些文本的“输入”类型，但是当涉及由多个字符串组成的对象类型时，我不知道当我需要使用HTML和preConfirm参数时，不知道该怎么做。

我该怎么办？甚至有可能首先将“地址”存储为对象吗？

[已更新]

我要做的是让用户分别填写“街道”，“城市”，“国家”，“区域”，“邮政编码”中的每一个，如下图所示，

并将其存储为“地址”对象，如下面的代码

<template>
      <v-btn class="create-button" color="yellow" @click="alertDisplay">Create</v-btn>

    <br/>

    <p>Test result of createCustomer: {{ createdCustomer }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        createdCustomer: null
      }
    },
    methods: {
      alertDisplay() {
        const {value: formValues} = await this.$swal.fire({
            title: 'Create private customer',
            html: '<input id="swal-input1" class="swal2-input" placeholder="Customer Number">' +
                '<select id="swal-input2" class="swal2-input"> <option value="fi_FI">fi_FI</option> <option value="sv_SE">sv_SE</option> </select>'
                 + 
                '<input id="swal-input3" class="swal2-input" placeholder="regNo">' +
                '<input id="swal-input4" class="swal2-input" placeholder="Address">' +
                '<input id="swal-input5" class="swal2-input" placeholder="First Name">' +
                '<input id="swal-input6" class="swal2-input" placeholder="Last Name">'
                ,
            focusConfirm: false,
            preConfirm: () => {
                return [
                    document.getElementById('swal-input1').value,
                    document.getElementById('swal-input2').value,
                    document.getElementById('swal-input3').value,
                    document.getElementById('swal-input4').value,
                    document.getElementById('swal-input5').value,
                    document.getElementById('swal-input6').value
                ]
            }
        })
        if (formValues) {
            this.createdCustomer = this.$swal.fire(JSON.stringify(formValues));
            console.log(this.createdCustomer);
        }   
      }
    }
  }
</script>

[已更新（版本2）

v模型不起作用

"address": {
    "street": "string",
    "city": "string",
    "country": "string",
    "region": "string",
    "zipCode": "string"
}

输出

但我希望它像

"address": {
    "street": "string",
    "city": "string",
    "country": "string",
    "region": "string",
    "zipCode": "string"
}

Answer 1

您可以使用v-model。这样，当您更改输入中的值时，地址对象的值也将更改。

<input v-model="address.street">
<input v-model="address.city">
<input v-model="address.country">
<input v-model="address.region>
<input v-model="address.zipCode">

请参见以下示例https://jsfiddle.net/greenfoxx/bo8cfxqz/5/

v-model https://vuejs.org/v2/guide/forms.html

的参考

Answer 2

我设法找到了解决此问题的方法，所以我将自行发表答案。

问题的根源在于该部分中的单行this.createdCustomer = formValues;

if (formValues) {
            this.createdCustomer = formValues;
            console.log('the content of this.createdCustomer');
            console.log(this.createdCustomer);
            console.log('the content of this.createdCustomer.address');
            console.log(this.createdCustomer.address);
        }

我的原始问题帖子的

。

因为用户输入存储为10个单独的原始数据类型输入，而不是包含多个字符串的对象形式“地址”，所以它是从this.createdCustomer分配给formValues的字符串数组。

为了解决这个问题，我做了以下两件事。

以对象的形式声明createdCustomer
通过引用它的索引号（ ←这是我很久没意识到的 ）来为表单值一个一个地分配每个值

关于第一点，我声明了createdCustomer如下。

data() {
      return {
        createdCustomer: {
          customerNumber: null,
          locale: null,
          regNo: null,
          address: {
            street: null,
            city: null,
            country: null,
            region: null,
            zipCode: null
          },
          firstName: null,
          lastName: null
        }
      }
    },

关于第二点，我像这样一一引用了formValues的索引。

if (formValues) {
            //this.createdCustomer = formValues;   // this one line overwrote the entire createdCustomer object, which was the root of the problem
            this.createdCustomer.customerNumber = formValues[0];
            this.createdCustomer.locale = formValues[1];
            this.createdCustomer.regNo = formValues[2];
            this.createdCustomer.address.street = formValues[3];
            this.createdCustomer.address.city = formValues[4];
            this.createdCustomer.address.country = formValues[5];
            this.createdCustomer.address.region = formValues[6];
            this.createdCustomer.address.zipCode = formValues[7];
            this.createdCustomer.firstName = formValues[8];
            this.createdCustomer.lastName = formValues[9];

            console.log('the content of this.createdCustomer.address');
            console.log(this.createdCustomer.address);

            console.log('the content of this.createdCustomer.address.street');
            console.log(this.createdCustomer.address.street);

        }

现在，“地址”以“地址”对象的形式传递，并且输出与预期的一样。

Test result of createCustomer: { "customerNumber": "JS1", "locale": "fi_FI", "regNo": "123ABC", "address": { "street": "stackoverflow st 12", "city": "San Francisco", "country": "USA", "region": "California", "zipCode": "12345" }, "firstName": "Shinichi", "lastName": "Takagi" }

如何使用Vue-SweetAlert2在单个弹出窗口中传递对象输入和更新数据

2 个答案: