MUI+vue.js动态模板加载服务器数据生成列表并根据下标获取id

第一次用mui和vue.js写移动端，纯粹为了记录错误，写得不好勿喷

首先HTML

<ul id="gold_ul" class="mui-table-view trade-list-container jiqikong">
        <li class="mui-table-view-cell mui-media jiqikongitem"  v-for="(item,index) in items":key = index>
                    <a style="color: #6641E2;" href="javascript:;">
                        <img  class="mui-media-object mui-pull-left gold_img" src="image/a.png">
                        <div class="mui-media-body">
                            {{ item.name }}
                    <p class="trade-list-user-info">名字：<span class="user-code">{{ item.output }} </span></p>
                    <p class="trade-list-user-info">名字：<span class="trade-gold-price">{{ item.price }} </span></p>
                    <p class="trade-list-user-info">名字：<span class="trade-gold-num">{{ item.period }} </span></p>
                    <p class="trade-list-user-info">名字：<span class="trade-gold-price">{{ item.number }}</span></p>
                        </div>
                    <button class="mui-btn mui-btn-royal trade-btn" type="button"  @click="buy_but(index)">购买</button>
                    </a>
                </li>
    </ul>

然后js部分

// 返回所点击条目的数据
  function data(){
    return{
        current: null
       }
    }
//购买提示
        function buy_but(i){
            this.current  = i;
            mui.confirm('',data[i]['name']+'购买确认',确认框消失后需要执行函数,'div')
        }