[Vuejs]-Vue 3 Composition API: using props as initial value for component data

by

0👍

✅

Turns out that I was somehow passing a reference in the parent. Following is my code:

setup(props) {
  watchEffect(() => {
      if (searchTerm.value == "") {
        filteredEntries.value = []
      } else {
        filteredEntries.value = entries.value.filter(searchFilter)
      }
    })

  return {
      searchTerm, filteredEntries, echo, showPreview
    }
}

And in the template:

<SearchPreview
    v-for="( entry, index ) in filteredEntries"
    :key="index"
    :entry="entry"
    :search-term="searchTerm"
  />

No clue why it passes a ref and I’m not sure how to just pass the value, but I fixed it in the component with the following hack:

const displayEntry = ref(JSON.parse(JSON.stringify(props.entry)))

(this leaves some nested properties undefined but I pass those separately to make it work)

0👍

You never initialized fileredEntries as a ref in the code example you showed. How are you assigning any values there?
If you’re using a data field on your component then you should move that to the setup function. Don’t mix composition and options api, it doesn’t work well together.

Also you used a (for … in) loop to iterate over your filteredEntries.
For an Array you should be using a (for … of) loop. (see What is the difference between ( for… in ) and ( for… of ) statements?)

Here’s an example of what it should like without any hacks.

<template>
  <div>
    <SearchPreview
      v-for="( entry, index ) of filteredEntries"
      :key="index"
      :entry="entry"
      :search-term="searchTerm"
    />
  </div>
</template>
<script>

const MyComponent = defineComponent({
setup(props) {
  const entries = ref(['John', 'Jane']);
  const searchTerm = ref('');
  const filteredEntries = ref([]);
  const searchFilter = (item) => {
    // do some filtering
  };

  watchEffect(() => {
      if (searchTerm.value == "") {
        filteredEntries.value = []
      } else {
        filteredEntries.value = entries.value.filter(searchFilter)
      }
    });

  return {
      searchTerm, filteredEntries
    };
  }
})

Leave a comment