vue v-for循环遍历列表，点击每一项，根据服务器返回的id值，将不同的数据分别渲染在同一个页面

水深无声 2023-01-16 12:27 153阅读 0赞

# vue v-for循环列表，点击每一项，根据服务器传的id值，在同一页面渲染不同的数据 #

**问题起源：**  
这几天在练习vue项目，其中vue-router的作用，在整个项目中起着至关重要的作用，其中包括一级路由的跳转、二级路由的跳转，这几天我遇到的这个问题是根据遍历服务器所给的数据，从而给这些数据都添加一个点击事件，点击不同的数据列表，让其渲染不同的内容，但是渲染的这些内容都是在这同一个页面组件中。这就用到了路由的动态匹配，但是由于是自己第一次练习，所以有些细节的东西没有掌握好，因此花费了一些时间去理解，所以今天特意的总结一下路由的动态匹配！

**演示如下：**

## 一、跳转前的页面 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70]

<div class="activity" v-for="(activity, index) in allActivity" :key="index">
            <div class="actName" @click="goTo(`/home/activityDeatil/${i_id[index]}`)">
              <div class="name">
                <div class="theme">活动主题：{
       { activity.theme }}</div>
                <div class="id">活动编号：{
       { activity.id }}</div>
              </div>
            </div>
            <div class="image" @click="goTo(`/home/activityDeatil/${i_id[index]}`)">
              <img :src=" activity.pic_address ? activity.pic_address : 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F17%2F02%2F16%2F6ee1508aca7cf35a7c69c99456f9eac8.jpg%21%2Ffwfh%2F804x401%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fku.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1621779256&t=83f1ae413bf77e03e8c82f4e15d67464' " alt="" />
            </div>
          </div>

**这块是封装的跳转路由的方法**

goTo(path) { 
          this.$router.push(path);
        },

**data中的属性：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 1]

## 二、配置相应的路由映射关系 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 2]

## 三、跳转后的路由 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 3]  
**通过`this.i_id = this.$route.params.i_id;`来拿到后台给提供的id值，然后将这个值传入后端接口，就可以拿到每个id所对应的后台的数据**

getDetailData() { 
          // 接收到Volunteer传过来的i_id
          this.i_id = this.$route.params.i_id;
          console.log(this.i_id);
          //这块就可以用传入相应的id值来拿到后台给提供的相应的数据
          checkAllActivityDetail(this.token, this.i_id).then((res) => { 
            console.log(res);
            //this.i_id_DetailContent = res;
            //if (res.isJoinActivity === 1) { 
              //this.$refs.volunteer.innerText = "已报名";
              //this.$refs.volunteer.attributes[2].value =
                //"color: white;background: red;border-color: red;";
            }
          });
        },

## 四、检验id值是否传入 ##

点击第一个列表，获得其对应的id值

![在这里插入图片描述][20210425234829536.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 4]

点击第二个，获取其对应的id值  
![在这里插入图片描述][20210425234951670.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 5]  
这里边返回的数据是不一样的！  
**第一个数据结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 6]  
**第二个数据结果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 7]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70]: /images/20221022/ad2835c8492e4544b0cf0861d26e58b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221022/54e18b7fcc434b8381ad820554d5f352.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221022/f1043699419c446c9cfabd718e26d76e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 3]: /images/20221022/837da1639c7940b7bfd65cd66806cec7.png
[20210425234829536.png]: /images/20221022/21ff716cb60642fb8c87d71c886dd579.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 4]: /images/20221022/05596ec7342a44e1af0b3dab16a3bfb5.png
[20210425234951670.png]: /images/20221022/d28268e3d9094862982ad57a922feb4b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 5]: /images/20221022/50727e20a68b4731a67d58d7e2e4ff5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 6]: /images/20221022/ba3dbaa7390b4407960183b181cd26e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 7]: /images/20221022/7e3e490f27414f89a4fbd6d80fb585c5.png