CODEWITHSUNDEEP
vue.jsreusability
Quantum
Quantum

Reputation: 288

VueJS - How do I use props in same component to specify the value in another component

I am new to vuejs, I want to know how props can be g to mounted function of another component. Below i will show how i have tried it.

Here is my Component.vue

<template>
  <div class="Passing prop value">
    <chart :id="'3'"></chart>
  </div>
  <div class="Passing prop value second time">
    <chart :id="'8'"></chart>
  </div>
</template>

<script>
import chart from '.chartline.vue'
export default{
    props: {
        id: {
            type: String,
            required: true 
         }
    },
  components: {chart},
  mounted (){
    this.$http.get('api/goes/here' + this.id ) <-- here id should get value 3 for 1st div and value 8 for second div
  }
}
</script>

I am passing the id value in the component, and i expect the same value in the mounted function.

As you can i tried to achieve it by using props but dont know nothing is displayed in browser, so is this the right way to use props.

objective: I want to give id in the imported component and specify the value there.Please do help me.

Upvotes: 1

Views: 1163

Answers (1)

Amaarockz
Amaarockz

Reputation: 4684

Firstafall let me add a solution assuming that your prop 'id' contains just one value
```
<template>
  <div class="Passing prop value">
    <chart :id="getId"></chart>
  </div>
</template>

<script>
import chart from '.chartline.vue'
export default{
    props: {
        id: {
            type: String,
            required: true 
         }
    },
  components: {chart},
  computed: {
    getId() {
       return this.id;
    }
  }
  mounted (){
    this.$http.get('api/goes/here' + this.id ) <-- here id should get value 3 for 1st div and value 8 for second div
  }
}
</script>

// Secondly like if your response has a array of id's then you can do this in this way

```
<template>
  <div v-for="idd in getIds" class="Passing prop value">
    <chart :id="idd"></chart>
  </div>
</template>

<script>
import chart from '.chartline.vue'
export default{
    props: {
        id: {
            type: String,
            required: true 
         }
    },
    data() {
      return {
      ids: []
      };
    }
    components: {chart},
    computed: {
      getIds() {
       return this.ids;
      }
    }
    mounted (){
    this.ids = this.$http.get('api/goes/here' + this.id ) <-- Assuming that the 
    response is an array
    }
}
```

Upvotes: 1

Related Questions