Leveraging props to set the initial value of component data in Vue 3 Composition API

Question

Leveraging props to set the initial value of component data in Vue 3 Composition API

Currently, I am in the process of developing a search page in Vue 3 using the composition API. One of my components is responsible for displaying a snippet of data that includes specific keywords provided by the parent component. To achieve this, I need to create a displayable value based on the original data.

Initially, I made the mistake of assuming that simply fetching the props value like this would suffice:

setup(props) {

          const displayEntry = ref(props.entry)

...

However, this approach turned out to be reactive and caused unwanted changes to the original data. Since I don't require reactivity for this particular task as the component is dynamically created from the parent, storing a working copy of the data in the parent would only add unnecessary complexity to the code. After attempting various solutions to break the reactivity cycle, I finally found a simple solution:

displayEntry.value = props.entry

But then, my linter flagged an error:

error    Getting a value from the `props` in root scope of `setup()` will cause the value to lose reactivity  vue/no-setup-props-destructure

My question now is, what is the correct method to directly access the value from a prop without causing reactivity issues?

javascript vue.js vue-component vuejs3 vue-composition-api

Answer 1

Answer №1

It turns out that the issue was caused by inadvertently passing a reference in the parent component. Here is the relevant code snippet:

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

  return {
      searchTerm, filteredEntries, echo, showPreview
    }
}

The template section looks like this:

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

I couldn't figure out why it was passing a ref instead of just the value, but I managed to resolve the issue within the component using this workaround:

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

(Note: Some nested properties remain undefined, but I passed them separately to ensure functionality)

Answer 2

It turns out that the issue was caused by inadvertently passing a reference in the parent component. Here is the relevant code snippet:

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

  return {
      searchTerm, filteredEntries, echo, showPreview
    }
}

The template section looks like this:

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

I couldn't figure out why it was passing a ref instead of just the value, but I managed to resolve the issue within the component using this workaround:

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

(Note: Some nested properties remain undefined, but I passed them separately to ensure functionality)

Answer 3

Answer №2

You forgot to initialize fileredEntries as a ref in the code snippet provided. How are you populating it with values? If you're utilizing a data field on your component, it's recommended to move it to the setup function. Avoid mixing composition and options API, as they don't complement each other well.

Furthermore, you employed a (for ... in) loop to iterate through your filteredEntries. For an Array, it's more suitable to use a (for ... of) loop instead. (refer to What is the difference between ( for... in ) and ( for... of ) statements?)

Here's a refined example without any workarounds:

<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) => {
    // apply filtering logic here
  };

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

  return {
      searchTerm, filteredEntries
    };
  }
})

Answer 4

You forgot to initialize fileredEntries as a ref in the code snippet provided. How are you populating it with values? If you're utilizing a data field on your component, it's recommended to move it to the setup function. Avoid mixing composition and options API, as they don't complement each other well.

Furthermore, you employed a (for ... in) loop to iterate through your filteredEntries. For an Array, it's more suitable to use a (for ... of) loop instead. (refer to What is the difference between ( for... in ) and ( for... of ) statements?)

Here's a refined example without any workarounds:

<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) => {
    // apply filtering logic here
  };

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

  return {
      searchTerm, filteredEntries
    };
  }
})

Leveraging props to set the initial value of component data in Vue 3 Composition API

Answer №1

Answer №2

Similar questions

Adding a new value to an array of objects without altering the existing values in ReactJS and NextJS

Display the HTML output using a Vue template tag without incorporating a nested element

You cannot access the property 'subscribe' on a void type in Angular 2

Using JavaScript to toggle the iron-collapse property

Performing bulk operations on multiple documents in MongoDB by specifying a custom identifier for updating or

Is there a way to view the contents of the dev server once it has been bundled by webpack?

Is it possible to generate a PNG blob using binary data stored in a typed array?

Stop receiving notifications for channel events in Stream with the GetStream.io Chat API

Is one round the limit for my JavaScript image slider?

Can you explain the purpose of $winstonLoggerConfig<T>() and $winstonLogger<T>() in winston v3?

"Exploring the possibilities of customizing Material UI tabs and implementing a tabs scroller

Common JavaScript Framework Startup Errors

Retrieve JSON encoded data from a separate AJAX request

transferring information between pages in nextjs

Getting started with TinyMCE in Nuxt: A step-by-step guide

Execute JavaScript code once all the AngularJS template directives are fully loaded

Guide on implementing Regular Expressions in Directives for validation in Angular 8

Simple steps to turn off error highlighting for TypeScript code in Visual Studio Code

"Issue with Material-ui Autocomplete where the defaultValue does not function properly

Asynchronous waterfall call in Node.js to call the method before