Vue.js 如何在HTML&；的其他部分中使用来自API响应的id；VueJS中的脚本

我试图使我的代码动态，而不使用任何硬代码。为此，我想使用来自API的id

这是我的API响应：[/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,
      } 

      ...

    ]

这是我的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>

探索
{{mes.这只显示了{u id8}的{u数据}
信息：[]，
人工编码站：[]
...
创建（）{
这是.http.get（“/infos”）
.then（（response）=>{this.infos=response.data}）
.catch（（错误）=>{console.log（错误）}）
this.$http.get（'/messages/8/tick'）{this.mes=response.data}）
.catch（（错误）=>{console.log（错误）}）
}

正如您所看到的my Component.vue，我显示了8张卡，每张卡显示的内容与我硬编码id为8的内容相同。因此，我想知道如何在HTML和其他脚本中使用来自/infos端点的API响应的id

还要注意的是，来自API的id只是一个数字，所以我想知道如何将其转换为字符串。然后是如何在其他HTML和脚本中使用它

---

请帮助我，我想将来自API的id放入我在Component.vue中所做的任何评论。

最佳做法是，您需要为消息创建一个新组件，并在组件传递中作为道具使用id，并使用此id动态构建消息组件。 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>

探索
{{mes.my_key_name}
人工编码站：[]
...
道具：{
身份证：{
类型：字符串，
要求：正确，
},
},
创建（）{
this.http.get（`/messages/this.id/tick`）
.then（（response）=>{this.mes=response.data}）
.catch（（错误）=>{console.log（错误）}）
}

App.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_${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>

{{info.name}
信息：[]，
...
创建（）{
这是.http.get（“/infos”）
.then（（response）=>{this.infos=response.data}）
.catch（（错误）=>{console.log（错误）}）

我相信我更新了所有硬编码的值，并且按照您的要求将info id转换为字符串

---

让我知道，请：）

是的，涵盖了所有内容。非常感谢，我会检查并让你知道。对于试图在img行编辑我的评论的人，请检查这一切正常，但我希望在App.vue中显示消息。它本身只包含小内容，所以我如何在App.vueca中使用它。请详细解释您想要什么要实现吗？这并不清楚，就像您创建了一个名为message.vue的单独组件一样，这在我的案例中不是必需的，我只想在我的App.vue组件中使用API“/messages”端点。我只想提供来自API/infos端点的id。