pass string to nested vue component and access it in nested component

Question

I have a vue component and it pass the string to nested vue component as follow,

<products-by-category :category="this.value"></products-by-category>

following section shows how I try to use that passed string in that nested vue component. but it is not getting that string to <span>. what is the wrong with it??

<template>
  <span>Category : {{ categories }}</span>
</template>

<script>
export default {
name: "ProductsByCategory",
  props: {
  category: {
    type: String,
    default: function (){
      return ''
    }
  }
  },

  data(){
   return {
     categories: this.category
   }
  }
}
</script>

<style scoped>

</style>

Jounior Developer · Accepted Answer · 2020-12-31 04:27:21Z

0

I have resolved it as follows,

<template>
  <input type="text" v-model="category">
</template>

<script>
export default {
name: "ProductsByCategory",
  props: {
  category: {
    type: String,
  }
  }
}
</script>

<style scoped>

</style>

reference: How to access data from deeply nested child components in Vue.js

answered Dec 31, 2020 at 4:27

Jounior Developer

1651 silver badge13 bronze badges

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

Collectives™ on Stack Overflow

pass string to nested vue component and access it in nested component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related