vue已经循环出来的数据，通过方法点击事件改变了数据，但页面数据没有更新

Question

<div class="slide-item" v-for="(item,index) in shoplist">

        <table width="100%" align="center">

             <tr><td align="center"><img :src="item.headimgurl" class="merch-logo" /></td></tr>

             <tr><td align="center" class="merch-text">{{item.merchname}}</td></tr>

             <tr><td align="center">

            <span class="merch-desc font-08 font-gray">{{item.remark}} </span>    

            </td></tr>     

             <tr><td align="center" v-on:click="subMerch(item.id,item.isfocus)">

             <span align=center v-model="number" v-if="item.isfocus==0">{{number}}</span>

             <span align=center v-model="numbery" v-if="item.isfocus==1">{{numbery}}</span>

             </td></tr>

     </table>

</div>

var vue = new Vue({

el: '.goods-index',

data: {

//省略……

number:'关注',

numbery:'已关注',

},

subMerch:function(shopID,isfocus){

var self = this;

if(self.isfocus==1){

self.isfocus=0;

self.number='关注'

}

else{

self.isfocus=1;

self.numbery='已关注'

 

}

ajax({

url:'api/article/focus',

data:{

merchId:shopID,

},

success:function(data){

console.log(data);

mui.toast(data.info)

},

error:function(err){

console.log(err)

}

})

window.location.reload(); 

},

加上最后的刷新语句可以实现刷新页面更改number和numbery的值

如果不加最后的刷新语句 怎样才能实现无刷新更改这两个值？

   实现点击关注就变成已关注

Answer 1

事件相关的逻辑（事件回调）要在vue的实例配置methods选项内，而不是将subMerch与钩子函数，data同级,如下所示methods:{     subMerch:function{...