Topic: "name" attribute for MDBSelect

ilya premium asked 4 months ago


Hi, I am having trouble using MDBSelect inside a form because I cannot set the name attribute for the MDBSelect input. This attribute is added to the <div class="select-wrapper" name="..." instead of being added directly to the input. As a result, when submitting the form, the POST request does not include the value of this select field. Can you please provide a solution to this problem?

Code snippet:

<form method="POST">
  <mdb-select
          name="fruit"
          label="Select fruit"
          v-model:options="fruits"
          filter="true"
  />
  <input type="submit" value="Save" />
</form>

Bartosz Cylwik staff answered 4 months ago


Hi! The name (and other attributes) are beeing added to the select wrapper element. If you want to add the name attribute to the input (from select component) you can add it inside the onMounted hook like this:

  onMounted(()=>{
    const inputEl = document.querySelector("#selectRef input")
    inputEl.name = "my-name"
  })

You can checkout my snippet here:

https://mdbootstrap.com/snippets/vue/b-cylwik/6008556#js-tab-view



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.1.1
  • Device: Laptop
  • Browser: Firefox
  • OS: Arch Linux
  • Provided sample code: Yes
  • Provided link: No