object Event appears in input field on focusout

Question

I am working on VueJS app that allows to edit json file with specific data. I have two similar components: AliasEntry and EquipmentEntry. The second is used to manipulate array of objects and seems to work fine. I can add, delete and edit fields. But AliasEntry, which serves arrays of aliases (strings) behaves weird and crashes: When I click on input with actual string in it and edit it, changes are updated in props. But when i click out of input, it's content is replaced by "[object Event]" and performing any action crashes app with error "Failed to execute 'structuredClone' on 'Window': Event object could not be cloned."

Here is code of AliasEntry component

<template>
  <div>
    <input 
    :value="item" 
    @input="(event) => handleAliasUpdate(event)"
    >
  </div>
</template>

<script>
import { toRaw } from 'vue'
export default {
  props: {
    item: String
  },
  methods: {
    handleAliasUpdate(event){
      const record = structuredClone(toRaw(event.target.value))
      this.$emit('change', record)
    }
  }
};
</script>

I tried to add toRaw, because it helped earlier, but i am at loss right now. Note: i suppose this error ("Failed to execute 'structuredClone'...) happens in containing component.

Answer 1

It seems like the issue might be related to how you're handling the event object in your handleAliasUpdate method.

Use event.target.value directly without toRaw, since event.target.value is already the raw value you want.

Remove the structuredClone function, as it's unnecessary in this context and might be causing the error.

You can do it like this:

<template>
  <div>
    <input 
      :value="item" 
      @input="handleAliasUpdate"
    >
  </div>
</template>

<script>
export default {
  props: {
    item: String
  },
  methods: {
    handleAliasUpdate(event) {
      const newValue = event.target.value;
      this.$emit('change', newValue);
    }
  }
};
</script>

I hope this helps you.