I'm facing an issue with a form that has linked selects. When one select is filled, the other select should also be filled with the corresponding code. However, when opening the modal with the field value, it fails to load the value. I suspect this might be due to the v-model being used differently.
Template
<template> <div class="Data"> <b-row class="mt-0 mb-0"> <b-col align="left" md="3" sm="12"> <b-button variant="primary" @click="viewModal()" class="mr-2" size="sm"> <span> New</span> </b-button> </b-col> </b-row> // More template code goes here... </div> </div> </template> // Script and style sections are included in the original content. <p>When clicking the "Edit" button in the table's "Actions" column, the values within each "v-model" should be loaded into the opened modal. However, this doesn't happen for the first and second <code>b-form-selectelements. On the contrary, adding a new form works flawlessly, automatically populating the second select upon making the first selection.The issue seems to stem from using different v-models for the top two selects compared to the bottom two selects. The latter correctly populate with data from the
dataUniqueobject as intended.<b-form-select v-model="dataSelect" size="sm"> <option :key="obj.value2" v-for="obj in informations" v-bind:value="obj">{{ obj.value1 }}</option> </b-form-select>