Discover the seamless integration of v-for with SweetAlert2 for dynamic HTML output

Question

Discover the seamless integration of v-for with SweetAlert2 for dynamic HTML output

I'm attempting to display the following template in an alert using vue-sweetalert2:

<input v-model="name" class="swal2-input">

<select v-model="parent" name="parent" class="form-control">
  <option v-for="category in categories" v-bind:value="category.id">
    {{category.name}}
  </option>
</select>

While I have no issue with a regular template, I am unsure how to implement this in SweetAlert2.

I attempted the following code:

this.$swal({
  text: 'edit child',
  html:
   '<input v-model="name" class="swal2-input">' +
   `<select v-model="parent" name="parent" class="form-control">
      <option value="">nothing</option>
      <option v-for="category in categories" v-bind:value="category.id">
        {{category.name}}
      </option>
    </select>`,
  showCancelButton: true,
  confirmButtonText: 'edit',
  cancelButtonText: 'cancel',
  showCloseButton: true,
})

Unfortunately, it displays nothing.

javascript vue.js vuejs2 sweetalert2

Answer 1

Answer №1

When passing HTML to SweetAlert2 that is not handled by Vue, the template mechanisms such as v-for and v-model would not be accessible. This means you will need to manually create the template using JavaScript. Here's how:

html: `<input v-model="name" class="swal2-input">
<select v-model="parent" name="parent" class="form-control">
  <option v-for="category in categories" v-bind:value="category.id">{{category.name}}</option> ...`

You can replace the above code with this:

html: `<input id="my-input" value="${this.name}" class="swal2-input">
<select id="my-select" value="${this.parent}" name="parent" class="form-control">
  ${this.categories.map(cat => `<option value="${cat.id}">${cat.name}</option>`)} ...`

It's important to note that IDs were added to the <input> and <select> elements so that we can retrieve their values before confirming the alert:

const {value} = this.$swal({
  preConfirm: () => [
    document.getElementById("my-input").value,
    document.getElementById("my-select").value
  ]
});
console.log(value[0]); // value of my-input
console.log(value[1]); // value of my-select

Check out the demo here.

Answer 2

When passing HTML to SweetAlert2 that is not handled by Vue, the template mechanisms such as v-for and v-model would not be accessible. This means you will need to manually create the template using JavaScript. Here's how:

html: `<input v-model="name" class="swal2-input">
<select v-model="parent" name="parent" class="form-control">
  <option v-for="category in categories" v-bind:value="category.id">{{category.name}}</option> ...`

You can replace the above code with this:

html: `<input id="my-input" value="${this.name}" class="swal2-input">
<select id="my-select" value="${this.parent}" name="parent" class="form-control">
  ${this.categories.map(cat => `<option value="${cat.id}">${cat.name}</option>`)} ...`

It's important to note that IDs were added to the <input> and <select> elements so that we can retrieve their values before confirming the alert:

const {value} = this.$swal({
  preConfirm: () => [
    document.getElementById("my-input").value,
    document.getElementById("my-select").value
  ]
});
console.log(value[0]); // value of my-input
console.log(value[1]); // value of my-select

Check out the demo here.

Discover the seamless integration of v-for with SweetAlert2 for dynamic HTML output

Answer №1

Similar questions

Issue encountered when attempting to add multiple JavaScript functions through Greasemonkey using unsafeWindow

Retrieve the JSON object with an AJAX request that contains three arrays, then transfer these arrays to JavaScript

Notification Popup Occurs in Quadruplicate

Leveraging AJAX Response for Ending a Parallel Query

The component 'AppComponent' cannot access the property 'results'

Adjust the size of the Div and its content to fit the dimensions of

Verification checkbox in Html5 is mandatory

Generating numerous checkboxes dynamically

Troubleshooting Node.JS body parsing problems

Tips for interacting with Vue js buttons on JSP pages with Selenium WebDriver in Java

Guide on using a pipe feature with varying arguments when the main function is called

Importing files dynamically in JavaScript

Having trouble initializing and retrieving an array from the controller in AngularJS

Transmitting intricate Javascript Array to ASP.NET Controller Function

Send a response from socket.io to the client's browser

Using the setTimeout function is essential for successfully extracting values in a Jquery each loop. Without

Sorting elements of an array by symbol using the sort() method

How to create a floating <Toolbar/> with ReactJS, Redux, and Material-UI

The issue with the Woocommerce quantity increment buttons not functioning properly persists after an AJAX refresh, and the automatic load feature only activates after two

Populate a div using an HTML file with the help of AJAX