Vue 3 ref array doesnt update values

Question

Description

I'm new to Vue 3 and the composition API. When i try to delete values in an array declared with ref, values do not delete.

Code preview

Here is my code

<script setup lang="ts">
import { IPartnerCategory, IPartners } from '~~/shared/types'

const selectedPartnershipCategories = ref([])
const props = withDefaults(
  defineProps<{
    partnershipCategories?: IPartnerCategory[]
    partnerships?: IPartners[]
    freelancer?: boolean
  }>(),
  {
    partnershipCategories: () => [],
    partnerships: () => [],
    freelancer: false,
  }
)

const emit =
  defineEmits<{
    (e: 'update:value', partnership: IPartnerCategory): void
    (e: 'update:selected', select: boolean): void
  }>()

const updateSelectedPartnership = (partnershipId: string, categorySelected: boolean) => {
  if (categorySelected && !selectedPartnershipCategories.value.includes(partnershipId)) {
    return selectedPartnershipCategories.value.push(partnershipId)
  }
  if (!categorySelected && selectedPartnershipCategories.value.includes(partnershipId)) {
    const clearedArray = selectedPartnershipCategories.value.filter((i) => {
      return i !== partnershipId
    })
    console.log(clearedArray)
  }
}

const select = (event) => {
  updateSelectedPartnership(event.fieldId, event.isSelected)
}
</script>

My array is declared as selectedPartnershipCategories
I've a function named updateSelectedPartnesh, called everytime when i update a value in the selectedPartnership array
When i log clearedArray values are only pushed but not deleted.

Thanks in advance for your help :)

cSharp · Accepted Answer · 2022-08-16 06:47:52Z

2

This is because filter creates a shallow copy and does not modify the original array.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
console.log(words);

If you want to modify selectedPartnership, you should use splice or another method, or simply selectedPartnership = selectedPartnership.filter(...).

answered Aug 16, 2022 at 6:47

cSharp

3,1891 gold badge10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue 3 ref array doesnt update values

Description

Code preview

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Description

Code preview

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related