How to pass value to model (Vuejs 3)-CodePudding

in my Vuejs3 project, there is a form in which the new row will be generated by pressing a button, so I put an array to handle new rows then I need to validate inputs, but after validation of the input of the array, the value didn't pass to model, but it works without the validation.. please help me to understand the mistake that I did.

The Form:

<table >
  <thead>
    <tr>
      <th>#</th>
      <th style="width: 18%">
        Medikament <span >*</span>
      </th>
      <th style="width: 9%">Milligram</th>
      <th style="width: 9%">
        Packung <span >*</span>
      </th>
      <th style="width: 7%">
        Stück <span >*</span>
      </th>
      <th style="width: 19%">Apothekenname</th>
      <th style="width: 24%">Adresse der Apotheke</th>
      <th style="width: 14%">Postleitzahl</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="(item, index) in patientRequestForCreationDtos" :key="index">
      <td>{{ index   1 }}</td>

      <td>
        <input type="text" v-model="item.drugName"  />
      </td>
      <td>
        <input type="number" v-model="item.milligram"  />
      </td>
      <td>
        <input type="number" v-model="item.box"  />
      </td>
      <td>
        <input type="number" v-model="item.total"  />
      </td>
      <td>
        <input type="text"  v-model="item.drugStoreName" :readonly="patientDetails.isElga == false" />
      </td>
      <td>
        <input type="text"  v-model="item.drugStoreAddress" :readonly="patientDetails.isElga == false" />
      </td>
      <td>
        <input type="text"  v-model="item.drugStorePostalCode" :readonly="patientDetails.isElga == false" />
      </td>
      <td>
        <button type="button" @click="deleteRequestItemRow(index)" >
          -
        </button>
      </td>
    </tr>
  </tbody>
</table>

The Array:

patientRequestForCreationDtos: [{
  milligram: null,
  box: null,
  total: null,
  drugStoreName: "",
  drugStoreAddress: "",
  drugStorePostalCode: "",
  drugName: "",
}, ],

The validation function:

checkValidation() {
  if (!this.patientRequestForCreationDtos.drugName) {
    Swal.fire("drug name is required...");
    return;
  }
  return true;
},
```js

---

it always says => drug name is required..

CodePudding user response：

this.patientRequestForCreationDtos is array. maybe you can do this.

checkValidation(patientRequestForCreationDto) {
  if (!patientRequestForCreationDto.drugName) {
    Swal.fire("drug name is required...");
    return;
  }
  return true;
},

CodePudding user response：

if you'll have only one element in patientRequestForCreationDtos then you gotta choose first element in the array and then check its property

checkValidation() {
  if (!this.patientRequestForCreationDtos[0].drugName) {
    Swal.fire("drug name is required...");
    return;
  }
  return true
},

also if your patientRequestForCreationDtos is always gonna be an array then you might find this helpful