VueJS - 如何在没有任何硬代码的情况下使组件完全动态化

如何解决VueJS - 如何在没有任何硬代码的情况下使组件完全动态化

好吧，我是 vuejs 的新手，我正在从事一个项目，其中每个数据/内容都来自 RestAPI。所以，现在我想让我的组件完全动态化，无需任何硬编码，只需使用来自 API 的 id 并相应地显示内容。

这是我的 router.js：

 {
      path: '/views/frames',name: 'frames',component: () => import('./views/frames/App.vue'),},{
  path: '/views/frames/:viewContentId',<--- Dynamic routing
  name: 'letsCheck',component: () => import('./views/frames/Contents.vue')
}

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

目前，从以下这些代码中，我在第一页中显示了 8 张卡片，它获得了 id=8 的相同内容，因为我在 App.vue ie (mes) 中对其进行了硬编码。但我想让它动态而不直接使用任何 id，而是代码应该使用来自 API /infos 的 id，然后相应地显示内容。

当 App.vue 中的按钮被点击时，假设用户在第三张卡片中点击了它，那么 components.vue 必须分配 id=3 并显示内容。

请帮我解决这个问题，我被困在这里了！

解决方法

首先，您的许多问题都已在 How do i use the id coming from the API response in other parts of HTML & Scripts in VueJS 处得到解答。

现在进行 INSERT INTO employees (employee_number/**,more props*/) VALUES (123 /**,more props*/) 组件动态构建：

letsCheck

组件.vue

{
  path: '/views/frames/:viewContentId',name: 'letsCheck',component: () => import('./views/frames/Contents.vue'),props: (route) => {
        const viewContentId = route.params.viewContentId.toString()
        return { viewContentId }
      },}

然后在组件中，您可以使用 props: { viewContentId: { type: String,required: true,}, 进行任何 api 调用，这是来自路由器的 id 并动态呈现模板