-1

I am trying to make my code Dynamic without using any hard code. And for that i want to use the id coming from the API.

Here is my API Response: [/infos]

    [
        ...

      {
        "id": 7,
        "name": "Highway",
        "price": "High",
        "min": "785",
        "max": "1856",
        "tag": null,
      },
      {
        "id": 8,
        "name": "Lowway",
        "price": "low",
        "min": "685",
        "max": "1956",
        "tag": null,
      } 

      ...

    ]

Here is my Component.vue:

<div class="vx-row">
    <div class="vx-col w-full md:w-1/2 mb-base" v-for="info in infos" :key="info.id">
          <vx-card>
             <div class="header">
               <div class="left">
                 <img src="./img/info_8_logo.png" alt=""/>            <-- Hard coded value ie 8
                 <b>{{info.name}}</b>
               </div>
             <div class="right">
                  <vs-button @click="$router.push({name: 'letsCheck', params: {viewContentId: '8' }}).catch(err => {})">Explore</vs-button> 
                          <-- Above as a Hard-coded value ie 8 -->
                   {{mes.this_is_showing_only_data_of_id8}}       
             </div>
           </div>
          </vx-card>
      </div>
    </div>

<script>
infos: [],
mes: []
...
created () {
  this.$http.get('/infos')                                           
    .then((response) => { this.infos = response.data })
    .catch((error) => { console.log(error) })
   
  this.$http.get('/messages/8/tick')                                  <-- Hard coded value
    .then((response) => { this.mes = response.data })
    .catch((error) => { console.log(error) })

}
</script>

As you can see my Component.vue, i am displaying 8 cards and every cards are displaying the same contents as i have hardcoded the id as 8. So i want to know how to use the id coming from the API response of /infos endpoint in HTML and also in other scripts.

Also to note that the id coming from the API is just a number, so i want to know how to convert it to a string. And then how it can be used in other HTML and script.

Please help me in this i want to put the id coming from API to whichever comments i have made in Component.vue.

app_er
  • 87
  • 10

1 Answers1

1

Best Practises here, you need to create a new component for your messages and in the component pass as props the id and having this id to build dynamically the message component. Message.vue

    <template>
             <div class="right">
                  <vs-button @click="$router.push({name: 'letsCheck', params: {viewContentId: id }}).catch(err => {})">Explore</vs-button> 
                         
                   {{mes.my_key_name}}       
             </div>
           </template>

<script>
mes: []
...
  props: {
    id: {
      type: String,
      required: true,
    },
  },
created () {  
  this.$http.get(`/messages/this.id/tick`)                                 
    .then((response) => { this.mes = response.data })
    .catch((error) => { console.log(error) })

}
</script>

App.vue will be:

<div class="vx-row">
    <div class="vx-col w-full md:w-1/2 mb-base" v-for="info in infos" :key="info.id">
          <vx-card>
             <div class="header">
               <div class="left">
                 <img :src="`./img/info_${info.id}_logo.png`" alt=""/>            
                 <b>{{info.name}}</b>
               </div>
             <message :id="info.id.toString()"></message>
           </div>
          </vx-card>
      </div>
    </div>

<script>
infos: [],
...
created () {
  this.$http.get('/infos')                                           
    .then((response) => { this.infos = response.data })
    .catch((error) => { console.log(error) })
   
</script>

I believe I updated all of the hard coded values and also I converted info id to String as you requested.

Let me know pls :)

LastM4N
  • 1,890
  • 1
  • 16
  • 22
  • 1
    Yeah that covers everything. Thank you so much, i will check it and let you know. – app_er Jan 13 '21 at 08:56
  • For the guy that tried to edit my comment in img line pls check this https://stackoverflow.com/questions/45880956/how-to-use-img-src-in-vue-js – LastM4N Jan 13 '21 at 09:19
  • its all working fine, but i want the the message in App.vue itself it just contains small content, so how can i use it in App.vue – app_er Jan 13 '21 at 09:19
  • can you please explain thorough what you want to achive? It's not clear – LastM4N Jan 13 '21 at 09:20
  • Like you have created a separate component called message.vue, which is not required in my case, i want to use the API "/messages" endpoint in my App.vue component only. I just want to provide the id coming from API /infos endpoint to it. – app_er Jan 13 '21 at 09:25
  • Is there any particular reason why doing that? App.vue normally is a component which usage is mainly to use it for changing routes using *router-view* and adding global components and not writing complex code there.(ideally) – LastM4N Jan 13 '21 at 09:30
  • I have updated my question. I just used the App.vue as an example name, but my actual App.vue just contains change of routes and other components. So /messages endpoint does not contain any complex data. I just want to know how to pass the id coming from the /infos to it. – app_er Jan 13 '21 at 09:41