Ask for help, clone's vue project npm run dev went wrong. I don't know what the problem is.

the error is as follows:

 in ./src/pages/work/smart-program/tickets/tickets-list.vue?vue&type=template&id=ccd506f6&scoped=true&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
  Error compiling template:

  <div class="mui-inner-wrap">
    <title-bar title-name="">
      <router-link
        v-ripple=""rgba(255, 255, 255, .5)""
        class="iconfont icon-iconfontadd mui-icon mui-icon-right-nav mui-pull-right"
        to="/create-ticket/none"/>
    </title-bar>
    <div class="mui-content mui-scroll-wrapper wrapper">
      <div
        class="scroller-wrapper"
        :style="{top:44+statusBarHeight+"px"}">
        <page-control
          :has-data="list.length>0"
          :show-loading="true"
          prompt="~"
          @reload="getPageData">
          <scroller
            :min-content-height="-1"
            slot="hasData"
            :on-refresh="refresh"
            :on-infinite="infinite">
            <refresh-spinner slot="refresh-spinner"/>
            <infinite-spinner slot="infinite-spinner"/>
            <transition-group
              tag="ul"
              enter-active-class="animated flipInX"
              leave-active-class="animated flipOutX">
              <li
                class="ticket"
                v-for="(item,index) in list"
                :key="index">
                <h4 class="head">{{ item.name }}</h4>
                <div
                  :class="["body",item.isPay===status.payed?"payed":item.isPay===status.notPayed?"not-payed":"canceled"]">
                  <div>
                    <h5>{{ item.executedUnitName }}</h5>
                    <div>
                      <h2>{{ item.money||0 }}</h2>
                      <span>{{ item.isPay }}</span>
                    </div>
                  </div>
                </div>
                <div class="foot">
                  <span>{{ dateFormat("yyyy-MM-dd",new Date(item.recDate)) }}</span>
                  <span
                    :class="[item.isPay===status.payed?"payed":item.isPay===status.notPayed?"not-payed":"canceled"]"
                    @tap="showDetail(item.url)"></span>
                  <ul>
                    <li
                      v-for="(img,index) in item.image_list"
                      :key="index"
                      @tap="preview(item.image_list,index)">
                      <img :src="img.description">
                    </li>
                  </ul>
                </div>
              </li>
            </transition-group>
          </scroller>
        </page-control>
      </div>
    </div>
  </div>

  - Do not use v-for index as key on <transition-group> children, this is the same as not using keys.

my colleagues have been doing it for a long time. I clone to the local place, but I can"t solve it all the time. I can"t figure out what"s going on

.
Feb.27,2022

clone comes locally, you should first npm install , how to npm run dev. If you still report an error, you have to

.
npm install templateLoader.js --save-dev

your problem now is to clone someone else's project, but there is no clone to rely on his project


change: key= "index" on li to: key= "item.id". Note: if there is id under item, then you can use id,. If not, you can also use other properties of item. You can try it!


the error message is very clear:

  - Do not use v-for index as key on <transition-group> children, this is the same as not using keys.

just get rid of it.

Menu