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

Posted 2023-02-23

【中文标题】VueJS - 如何在没有任何硬代码的情况下使组件完全动态化

【英文标题】：VueJS - How to make components completely dynamic without any hard-code in it

【发布时间】：2021-04-18 03:13:24

【问题描述】：

嗯，我是 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" />                  <-- 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 中硬编码的内容相同，即（mes）。但是我想在不直接使用任何 id 的情况下使其动态化，而是代码应该使用来自 API /infos 的 id，然后相应地显示内容。

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

请帮帮我，我被困在这里了！

【参考方案1】：

如果我理解正确，您想点击卡片以查看其详细信息。

你可以在你的 dom 中做这样的事情：

<vs-button @click="goToDetails(info.id)">Explore</vs-button> 

并在您的脚本中的同一文件中：

methods: 
 gotoDetails(id) 
      this.$router.push( name: 'letsCheck', params: id)
    

此外，如果您的 API 有一个类似于 detail 的端点，只需创建一个获取 ID 的方法（查看下面的代码）并发送您的获取请求并仅在您的组件中显示该卡。

data() 
    return 
       infoDetail: null
    
,

created () 
  this.$http.get(`/infos/$this.$route.params.id`)                                           
    .then((response) =>  this.infoDetail = response.data )
    .catch((error) =>  console.log(error) )

【讨论】：

非常感谢，我会检查一下并告诉您，我想知道另外一件事，来自 API 响应的 id 是一个数字，那么我如何将其转换为字符串并将其传递给 html 和其他脚本。

它现在在您的 infoDetail 对象中。因此，每当您想使用它时，只需使用 toString() 方法将其变为字符串

【参考方案2】：

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

现在为letsCheck组件动态构建：

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

组件.vue

props: 
    viewContentId: 
      type: String,
      required: true,
    ,
  ,

然后在组件中，您可以使用viewContentId 进行任何 api 调用，这是来自路由器的 id 并动态呈现模板