(Vue.js) Values not updating themselves correctly-CodePudding

I have this weird issue i can't fix. The testArray is supposed to change its value from 'This is a test' into the items array from ItemList, and it does. However, it updates itself in a weird way, almost like its one update late - when i change the emit to ('response', items), it doesn't work. But, when i swap 'items' to 'test', it shows the array.

Any help would be much appreciated!

App.vue

<script setup>
  import ItemList from "./components/ItemList.vue";
  import {ref} from "vue";

  const testArray = ref('This is a test')
</script>
<template>
  <ItemList @response="(msg) => testArray = msg" />
  <ul>
    <li v-for="item in testArray" :key="item.id">
      {{item.name}}
    </li>
  </ul>
</template>

ItemList.vue

<script setup>
  import {ref} from "vue";
  const items = ref([
    {id: 1, name: 'SomeRandomName'},
    {id: 2, name: 'SomeRandomName'},
    {id: 3, name: 'SomeRandomName'},
  ])
  const test = ref(['Something'])
  const emit = defineEmits(['response'])
  emit('response', items)
</script>

<template>

</template>

CodePudding user response：

Did you try with:

emit('response', items.value)