Pass variable down to VueJS component

Question

I need to pass down a variable to a component. My setup is like this:

Main: Meet.vue

<html>
 <div class="carousel-cell">
    <Category :searchTerm="woman"></Category>
    </div>
 <div class="carousel-cell">
    <Category :searchTerm="men"></Category>
    </div>
[..]
<script>
import Category from './Category'
export default {
  components: {
    Category
  },

Sub: Category.vue:

export default {
  data () {
    return {
      search: [how to access the **searchTerm** here?]

How to access the searchTerm <Category :searchTerm="woman"></Category> from Meet.vue in Category.vue?

stackoverflow.com/questions/39199303/…

Muhammad Usman
– Muhammad Usman

2019-04-26 11:14:49 +00:00
Commented Apr 26, 2019 at 11:14 — Muhammad Usman
– Muhammad Usman, Commented Apr 26, 2019 at 11:14

Cédric M. · Accepted Answer · 2019-04-26 11:39:40Z

4

You'll have to introduce this searchTerm property in your Category component as described in the VueJS Documentation

In Category.vue

export default {
  props: ['searchTerm'],

  // Your component code (computed, methods, watch, ...)
}

If you want to apply some validation on your prop

export default {
  props: {
    searchTerm: {
      type: String,
      required: false,
      // If not required, it's possible to give a default value
      default: "woman"
    },
  }

  // Your component code (computed, methods, watch, ...)
}

You can then read your prop with this.searchTerm. You can also directly read it inside <template></template> with {{ searchTerm }} for example.

If at some point you'll need to write on one of your prop, it is best to copy it's value on a local variable and work with it

props: ['searchTerm'],
data: function () {
  return {
    // Write on search variable if needed
    search: this.searchTerm
  }
}

answered Apr 26, 2019 at 11:39

Cédric M.

1,2223 gold badges13 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Over a year ago

Thank you for this example. Is there a way to pass the searchTerm after it changed in the meet.vue? I tried v-bind without success: <div class="carousel-cell"> <Category v-bind="search" :searchTerm="search"></Category> The search term gets updated from the search box within meet.vue:

<v-text-field               v-model="search"               label="Search it..."                          ></v-text-field>

</div>`

Cédric M. Over a year ago

@Tom I suggest you to watch your prop in your Category component. You can have an example here stackoverflow.com/questions/44584292/… - and you can check the documentation to understand how it works : vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

Imran · Accepted Answer · 2019-04-26 11:22:39Z

1

Do as below while calling the Category component.

<Category :search="woman"></Category>

Here :search:"woman" means pass woman as value to the property of Category component.

Then in Category component:

export default {
  props: {
    search: {type: string, required: true}
    //Here it will give error if the search is passed anything but string
    //And if search is not passed it will give error. 
  }
  //Everything else

or

export default {
  props: [search], //No checking of data type and it's not requried
  //Everything else

answered Apr 26, 2019 at 11:22

Imran

4,7802 gold badges23 silver badges40 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 02:31:03Z

1

You are using props, so the answer is:

export default{
    props: ['searchTerm'],

it can then be used directly.

edited Jul 16, 2022 at 2:31

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 26, 2019 at 11:17

Ketzu

6921 gold badge7 silver badges12 bronze badges

Collectives™ on Stack Overflow

Pass variable down to VueJS component

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related