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

What is the process for retrieving information from my Google Analytics account to incorporate into my website?

Working with AngularJS: Implementing a Service in a Controller

"Angular File Upload Made Easy with Drag-and-Drop Functionality and Cleverly Positioned

What is the process of extracting a URL and inputting it into a form to enhance

timer-based user session expiration

Slowly revealing sticky navigation with slideDown animation using JQuery

Update the icon with the adjusted API information

How do you display a nested object in React after merging it?

The validation for the start and end dates in the datepicker is not functioning properly when

AgGrid Encounters Difficulty in Recovering Original Grid Information

Implementing IBAN as the default option in Stripe's PaymentElement

Error: An unexpected identifier was encountered while executing my function

What is the best way to send data into functions?

What is the reason behind the absence of certain fontAwesome icons?

Learn how to upload an image using Vue.js and then trigger a custom method

Challenges encountered when inserting nested data into MongoDB

Filtering database records using a static dropdown list in MVC 5: A step-by-step guide

Is there a way to fetch a file using the fs readFile function in node.js without explicitly stating the file name?

AngularJS: Modifying directive according to service value update

Leveraging the flexibility of an undefined variable as a useEffect dependency