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

Question

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

<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>

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

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

我设法将 6 个输入中的一个更改为 "select" 类型，而不是 "input" 类型，它只允许用户编写一些文本，但是当涉及到由多个组成的对象类型时像上面这样的字符串，需要用到HTML和preConfirm参数的时候不知道怎么办。

我该怎么做？是否有可能首先将 "address" 存储为对象？

[更新]

我想做的是让用户填写 "street"、"city"、"country"、"region"、"zipCode"分别如下图所示，

并将它们存储为 "address" 对象，如下面的代码

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

[已更新（版本 2]

v-模型不工作

async 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 v-model="createdCustomer.address.street" id="swal-input4" class="swal2-input" placeholder="Address (street)">' +
                '<input v-model="createdCustomer.address.city" id="swal-input5" class="swal2-input" placeholder="Address (city)">' +
                '<input v-model="createdCustomer.address.country" id="swal-input6" class="swal2-input" placeholder="Address (country)">' +
                '<input v-model="createdCustomer.address.region" id="swal-input7" class="swal2-input" placeholder="Address (region)">' +
                '<input v-model="createdCustomer.address.zipCode" id="swal-input8" class="swal2-input" placeholder="Address (zipCode)">' +
                '<input id="swal-input9" class="swal2-input" placeholder="First Name">' +
                '<input id="swal-input10" 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,
                    document.getElementById('swal-input7').value,
                    document.getElementById('swal-input8').value,
                    document.getElementById('swal-input9').value,
                    document.getElementById('swal-input10').value
                ]    

            }
        })
        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);
        }   
      }

输出

但我希望它像

Test result of createCustomer: [ "JS1", "fi_FI", "123ABC", {"Whosebug st 12", "San Francisco", "USA", "California", "12345"}, "Shinichi", "Takagi" ]

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

我设法找到了这个问题的解决方案，所以我将 post 自己一个答案。

问题的根源原来是

部分的单行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);
        }

我原来的问题 post。

因为用户输入存储为 10 个单独的原始数据类型输入，而不是包含多个字符串的对象形式 "address"，所以它是一个字符串数组，从 formValues。

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

以对象的形式声明createdCustomer
将formValues的每一个值一一赋值，通过引用它的索引号（←这是我这么久没意识到的)

关于第一点，我声明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);

        }

而现在 "address" 以 "address" 对象的形式传递，输出与预期的一样。

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

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

How to pass an object input and update the data in a single popup using Vue-SweetAlert2

vue.js

sweetalert2