Hi issues

[ghost]

I use useFieldArray and I remember that I can only remove the last item of the array like:

<script setup>
import {useFieldArra} from "vee-validate"

// validation schema and useForm here :)

const {add, remove, fields}  = useFieldArray('someField')

</script>

<template>
  <ul>
    <li  v-for="(item, idx) in fields" :key="item.key" >
      <input type='text' :v-model="`items[${props.idx}].A`" />
      <input type='text' :v-model="`items[${props.idx}].B`" />

      <button click='remove(idx)'>remove</button>
    </li>
  </ul>
</template>

I tried to use

function abc(key) {
  const newArray = fields.value.filter((el) => el.key !== key);

  fields.value = newArray;
}

but fields is ReadOnly

[logaretm]

Can you create an example on codesandbox or stackblitz?

[tgarif]

I've come across this situation once before. Here's a simple reproduction of the solution I came up with:

https://stackblitz.com/edit/vue3-script-setup-with-vite-s7hnmn?file=src/App.vue

[logaretm]

This is because your input component are not adjusting to the name changing when you remove an item. You need to pass a reactive reference to useField so vee-validate can detect that.

toRef is a handy function for doing that.

import { defineProps, toRef } from 'vue';
import { useField } from 'vee-validate';

const props = defineProps({
  itemInputName: String,
  quantityInputName: String,
})

const { value: item, errorMessage: itemError } = useField(toRef(props, 'itemInputName'))
const { value: quantity, errorMessage: quantityError } = useField(toRef(props, 'quantityInputName'))

https://stackblitz.com/edit/vue3-script-setup-with-vite-pmxfpv?file=src%2FApp.vue,src%2Fcomponents%2FInventoryFormInputs.vue

[tgarif]

This makes much more sense! Thanks @logaretm

[ghost]

It's strongly work :) Thanks guys Le lun. 13 juin 2022 à 12:12, Tengku Arif ***@***.***> a écrit :

…

I've come across this situation once before. Here's a simple reproduction of the solution I came up with: https://stackblitz.com/edit/vue3-script-setup-with-vite-s7hnmn?file=src/App.vue — Reply to this email directly, view it on GitHub <#3799 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHPD6V5MGW7HHRMLDCLCAOTVO4QSJANCNFSM5YRWR5RA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[ghost]

Thank you for the clarification. Le lun. 13 juin 2022 à 20:34, Abdelrahman Awad ***@***.***> a écrit :

…

This is because of your input component not adjusting to the name changing when you remove an item. You need to pass a reactive reference to useField so vee-validate can detect that. import { defineProps, toRef } from 'vue';import { useField } from 'vee-validate'; const props = defineProps({ itemInputName: String, quantityInputName: String,}) const { value: item, errorMessage: itemError } = useField(toRef(props, 'itemInputName'))const { value: quantity, errorMessage: quantityError } = useField(toRef(props, 'quantityInputName')) https://stackblitz.com/edit/vue3-script-setup-with-vite-pmxfpv?file=src%2FApp.vue,src%2Fcomponents%2FInventoryFormInputs.vue — Reply to this email directly, view it on GitHub <#3799 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHPD6VZBQGK3GY2IEYROKI3VO6LMBANCNFSM5YRWR5RA> . You are receiving this because you authored the thread.Message ID: ***@***.***>