如何在 VueJS 的 HTML 和脚本的其他部分中使用来自 API 响应的 id

Posted 2023-02-23

【中文标题】如何在 VueJS 的 HTML 和脚本的其他部分中使用来自 API 响应的 id

【英文标题】：How do i use the id coming from the API response in other parts of HTML & Scripts in VueJS

【发布时间】：2021-04-18 04:58:07

【问题描述】：

我正在尝试在不使用任何硬代码的情况下使我的代码动态化。为此，我想使用来自 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" />            <-- 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>

如您所见，我的 Component.vue 显示了 8 张卡片，每张卡片显示的内容与我将 id 硬编码为 8 的内容相同。所以我想知道如何使用来自 API 响应的 id html 和其他脚本中的 /infos 端点。

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

请帮助我，我想将来自 API 的 id 放到我在 Component.vue 中创建的任何 cmets 中。

【参考方案1】：

最佳实践在这里，您需要为您的消息创建一个新组件，并在组件中作为道具传递 id 并拥有此 id 以动态构建消息组件。 消息.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 将是：

<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`" />            
                 <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 id 转换为 String。

请告诉我:)

【讨论】：

是的，涵盖了所有内容。非常感谢，我会检查并通知您。

对于试图在 img 行中编辑我的评论的人，请检查***.com/questions/45880956/…

一切正常，但我希望 App.vue 中的消息本身只包含小内容，那么我如何在 App.vue 中使用它

您能详细解释一下您想要达到的目标吗？不清楚

就像您创建了一个名为 message.vue 的单独组件一样，这在我的情况下不是必需的，我只想在我的 App.vue 组件中使用 API“/messages”端点。我只想提供来自 API /infos 端点的 id。