[Vue warn]: Duplicate keys detected: '8'求助？

Question

vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '8'. This may cause an update error.

found in

---> <PersonSpace> at src/user/personSpace.vue
       <App> at src/App.vue
         <Root>

vue.runtime.esm.js?2b0e:619 [Vue warn]: Duplicate keys detected: '5'. This may cause an update error.

found in

---> <PersonSpace> at src/user/personSpace.vue
       <App> at src/App.vue
         <Root>

<template>
  <a-layout id="components-layout-demo-top" class="layout">
    <div id="header">
      <div class="logo">知&nbsp;否</div>

      <div id="title">

        <router-link :to="{name:'mainPage',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
          <a-icon type="home" />&nbsp;首页
        </router-link>
      </div>

      <div id="title1">
        <router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white">
          <a-icon type="user" />&nbsp;个人中心
        </router-link>
      </div>



      <a-input-search placeholder="请输入要搜索的问题" v-model="searchItem" style="width: 300px;margin: 15px 20px 10px 90px;" @search="onSearch"/>
      <button type="button" id="search" @click="onSearch" style="
    height: 15px;
    width: 120px;
    margin: 10px;
    padding: 18px;
    border-radius: 10px;
    line-height: 0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 20px;
    position: absolute;
    background: deepskyblue;
    font-weight: bold;
    color: white;
    border-color: skyblue;
    /*transform: translateY(4px);*/
">
        搜索问题

      </button>

      <div style="height:60px;weight:200px;float:right;padding: 0 20px;">


        <div id="right" style="padding: 10px 5px 20px 20px;">
          <a-badge :count=count title="通知" v-if=ifToken style="margin-left: 40px">
            <a-icon type="bell" style="font-size: 25px" title="通知" @click="getMessage"/>
          </a-badge>
          <router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}">
            <a-avatar shape="square" v-if=ifToken size="large" :src=img style="margin-left: 20px;margin-bottom: 12px"/>
          </router-link>
        </div>

        <template>
          <a-dropdown>
            <a style="color:white;font-size: 20px;" >
              {{ u_name }} <a-icon type="down" style="color:white;font-size:25px" />
            </a>
            <a-menu slot="overlay" @click="onClick">
              <a-menu-item key="1">
                <a-icon type="setting" />
                设置
              </a-menu-item>
              <a-menu-item key="2" @click="logout">
                <a-icon type="logout" />
                退出
              </a-menu-item>

            </a-menu>
          </a-dropdown>
        </template>

      </div>
    </div>


    <a-layout-content style="padding: 0 50px">
      <a-breadcrumb style="margin: 20px 0">
      </a-breadcrumb>
      <div :style="{ background: '#fff', padding: '24px', minHeight: '430px' }">
        <img :src=img width="50" height="50">
        <h3 style="font-weight: bold;display: inline;margin-left: 20px;">
          {{username}}
        </h3>
<!--        <a-button style="margin-left: 50px" @click="exit" type="danger">
          退出登录
        </a-button>-->
        <router-link :to="{name:'changeInformation',params:{'id':this.id,'img':this.img,'token':this.token}}">
          <a-button style="float: right;width: 120px;">编辑个人资料</a-button>
        </router-link>
        <br/><br/>

        <a-menu  mode="horizontal">
          <a-menu-item key="answer" style="width: 330px; text-align: center;font-weight: bold"> 回答</a-menu-item>
<!--          <a-menu-item key="star" style="width: 330px; text-align: center;font-weight: bold"> 收藏</a-menu-item>-->
          <a-menu-item key="question" @click="question" style="width: 330px; text-align: center;font-weight: bold"> 提问</a-menu-item>
        </a-menu>

        <!--依次类推的话，以传来的列表list中的question_id为key，依次显示各个问题，具体如下-->
        <div v-for="item in list" :key="item.question_id">

          <div style="float:right;background: red;font-size: 18px;padding:5px;color:white" v-if=item.question_authority_state>已终结</div>
          <a style="font-weight: bold;font-size: 20px;color: black;margin: 130px 0px;" @click="seeThisQuestion(item)">{{item.question_title}}</a><!--问题标题-->
          <p>{{item.answer_content}}</p><!--问题内容-->
<!--          {{item.question_authority_state}}&lt;!&ndash;问题的权限部分，到时候再对格式进行调整，因为现在没有样板&ndash;&gt;-->
          <a-button @click="changeAnswer(item)" style="float:left;width:90px;padding: 0 10px;" type="primary" v-if="item.question_authority_state === 0">修改回答</a-button>

          <a-button @click="deleteAnswer(item)" style="float:left;width:90px;padding: 0 10px;margin: 0px 30px;" type="danger" v-if="item.question_authority_state === 0">删除回答</a-button>

          <a-divider/>
        </div>
        <!--end 显示问题列表的部分-->

      </div>
    </a-layout-content>

  </a-layout>
</template>
<script>
export default {
  name:"personSpace",
  inject:['reload'],
  data(){
    return{
      current: ['mail'],
      username:'',//昵称
      id:this.$route.params.id,//从登陆界面进行传值
      img:this.$route.params.img,
      token:this.$route.params.token,
      list: [],
      searchItem:'',
      count:'',
      ifToken: localStorage.getItem('access_token'),
      u_name:''
    }
  },
  mounted() {
    var _this = this;
    _this.$axios.post('/api/user/selectByUserId',
        _this.$qs.stringify({
          uId:_this.id,
        }),
        {headers:{access_token:_this.token}}
    ).then(function (response) {
      console.log("主页获取登录用户信息：");
      console.log(response.data);
      console.log(response.data.data.u_img);
      console.log(response.data.data.u_name);
      _this.img = response.data.data.u_img;
      _this.u_name=response.data.data.u_name;
    }).catch(function (error) {
      console.log(error);
      //_this.$message.error('请求失败');
    })

    _this.$axios.post('/api/answer/showAnswerByUserId',
        _this.$qs.stringify( {
          userId: _this.$route.params.id,
          // userId: 2,
        }),{ headers: { access_token: _this.token } }
    ).then(function (response) {
      console.log(response.data);
      _this.list = response.data.data;
    }).catch(function (error) {
      console.log(error);
      _this.$message.error('对不起，请求失败');
    })//end get函数，获取某一个用户的所有回答

    _this.$axios.post('/api/msg/showMsgNum',
        _this.$qs.stringify({
          userId: _this.$route.params.id,//router传值！！！
        }),{headers:{access_token:_this.token}}
    ).then(function (response) {
      console.log(response.data.data);
      _this.count = response.data.data;
      //_this.list = response.data.data;
    }).catch(function (error) {
      console.log(error);
      _this.$message.error('获取消息失败');
    })
  },
  methods:{

    onClick ({ key }) {
      console.log(`Click on item ${key}`)
    },

    onSearch(){
      var _this = this;
      _this.$axios.post('/api/quest/selectByTitle',
          _this.$qs.stringify({
            questionTitle:_this.searchItem,
          }),{ headers: { access_token: _this.token } }
      ).then(function (response) {
        console.log(response.data.data);
        _this.$router.push({
          path:'/searchPage',
          name:'searchPage',//路由命名
          params:{
            list:response.data.data,
            id:_this.id,
            img:_this.img,
            token:_this.token
          },
        });//end 页面跳转
      }).catch(function (error) {
        console.log(error);
        _this.$message.error('请求失败');
      })
    },//end onSearch函数，进行查找问题

    getMessage(){
      var _this = this;
      _this.$router.push({
        path:'/messagePage',
        name:'messagePage',
        params:{
          id:_this.id,
          img:_this.img,
          token:_this.token,
        }
      })
    },//end getMessage函数，获取消息

    getAskedQuestions(){
      var _this = this;
      _this.$axios.post('/api/showQuestByUserId',
        _this.$qs.stringify({
          user_id:_this.userId,
        })
      ).then(function (response) {
        console.log(response.data);
        _this.list = response.data.data;
      }).catch(function (error) {
        console.log(error);
        _this.$message.error('请求失败');
      })
    },//end getAskedQuestions函数，获取该用户的提问

    edit(){
      var _this = this;
      _this.$router.push({
        path:'/changeInformation',
        name:'changeInformation',
        params:{
          id:_this.id,
          img:_this.userImg,
          token:_this.token,
        }
      })
    },//end edit函数，编辑个人信息

    question(){
      var _this = this;
      _this.$router.push({
        path:'/personQuestion',
        name:'personQuestion',
        params:{
          id:_this.id,
          img:_this.img,
          token:_this.token,
        }
      })
    },

    changeAnswer(record){
      var _this = this;
      console.log("修改回答：");
      console.log(record);
      _this.$router.push({
        path:'/changeAnswer',
        name:'changeAnswer',
        params:{
          answer_id:record.answer_id,
          answer_content:record.answer_content,
          id:_this.id,
          img:_this.img,
          token:_this.token,
          question_id:record.question_id,
        }
      })
    },//end

    deleteAnswer(record){
      var _this = this;
      _this.$axios.post('/api/answer/deleteAnswer',
          _this.$qs.stringify({
            answerId:record.answer_id,
            isDeleted:1,
          }),{headers: {access_token: _this.token}}
      ).then(function (response) {
        console.log(response.data);
        _this.$message.success('删除成功');
        _this.list = response.data.data;
        _this.reload();
      }).catch(function (error) {
        console.log(error);
        _this.$message.error('删除失败');
      })
    },

    logout(){
      var _this = this;
      _this.$axios.post('/api/user/leave',
        _this.$qs.stringify({
          uId: this.id,
        }),{headers: {access_token:_this.token}}
      ).then(function (response) {
        console.log(response.data);
        localStorage.removeItem('access_token');
        localStorage.clear();
        _this.$router.push({
          path:'/login',
          name:'login',
        })
      }).catch(function (error) {
        console.log(error);
        _this.$message.error('请求失败');
      })
    },//end exit函数/*

    seeThisQuestion(record){
      var _this = this;
      console.log(record);//打印问题详细信息
      _this.$router.push({
        path:'/detailpage',
        name:'DatailPage',//路由命名
        params:{
          question_id:record.question_id,//页面之间的传值
          id:_this.id,
          img:_this.img,
          token:_this.token,
          question_state:record.question_authority_state,
          question_title:record.question_title,
          question_content:record.question_content,
        },
      });
    },//end seeThisQuestion函数，查看这个问题的详细信息
  }
}
</script>
<style scoped>

</style>

这是页面的vue框架代码，求助！不胜感激

Answer 1

错误是 有重复key

你的代码里循环只有这一段

 

 应该是key重复了，建议这样写

v-for="(item, index) in list" :key="item.question_id + index"