how to create a edit modal using vue 3 multi select
i have a edit modal i want to show the previously selected values in the vue 3 multi select, the previous values are tags
<div
class="modal fade"
id="edit_product_type_modal"
data-bs-keyboard="false"
data-bs-backdrop="static"
>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header justify-content-center">
<h1 class="modal-title">Edit Product Types</h1>
<div
class="btn btn-icon btn-sm btn-active-light-primary ms-2"
data-bs-dismiss="modal"
aria-label="Close"
>
<span class="svg-icon svg-icon-2x"></span>
</div>
</div>
<Form
id="edit_product_type_form"
class="form"
novalidate="novalidate"
:validation-schema="edit_product_type_Validator"
v-slot="{ errors, isSubmitting }"
@submit="updateProductType"
>
<div class="modal-body">
<div id="add_product_type">
<div class="container">
<div class="row">
<div class="row">
<div class="field_style">
<label class="required form-label">Product Type</label>
<Field
type="text"
name="edit_product_type"
class="form-control form-control-lg mb-3 input-custom-field"
placeholder="Product Type*"
v-model="my_data.edit_product_type"
>
</Field>
<div class="fv-plugins-message-container">
<div class="fv-help-block">
<ErrorMessage name="edit_product_type" />
</div>
</div>
</div>
</div>
<!-- <div class="row">
<div class="field_style">
<label class="form-label">Select Shippers (For Bulk)</label>
<Multiselect
v-bind="my_data.users"
placeholder="Select Users"
:groups="true"
></Multiselect>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light btn-height"
ref="CloseModal"
data-bs-dismiss="modal"
>
Close
</button>
<button type="submit" class="btn btn-primary btn-height">Update</button>
</div>
</Form>
</div>
</div>
</div>
Replies (2)
this is the api through which i get the list of users
axios
.get("/api/admin/get_users")
.then((response) => {
my_data.users.options = response.data.map((user) => ({
label: user.company_name,
value: user.id,
}));
})
.catch((e) => {
console.log(e);
});
this is the api through which i get the previous users
cellClick: async (event: any, cell: any) => {
let data = cell.getRow().getData();
const type_id = { type_id: data.id };
const headers = { "Content-Type": "application/json" };
await axios
.post("api/admin/product_type/get_users", type_id, { headers })
.then((res) => {
if (res.data.status == 1) {
user_names.value = res.data.data;
}
});
},
Hi,
If it is an edit modal I guess that you are trying to change a default value of multiselect with data from your API.
From your code I see user_names.value = res.data.data I assume <storng>user_names</storng> is configuration object for your multiselect component. If your API returns data in the right format then this code should work and once data is received multiselect should be rerendered with updated data.
Do you have any errors in your browser console?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
