vue 动态绑定 点击事件(匿名函数)

更新:

        现在看当时的解决方法挺蠢的,直接修改绑定数组的值就好了,但是这种写法对我来说还是挺新鲜的,记录下.

遇到一个问题,一个点击方法在v-for里的一个元素上,由于该方法需要处理本次循环的数据并影响本次循环的其他元素,所以暂时没有想到可以把方法声明在vue的methods里的方法,所以就直接写在了元素上:

<view  @click="function(){if(order.createTime!=-1){order.createTime=-1;}else{order.createTime=1}}">
    <view style="width: 50vw;" >回收物品</view>
    <view style="color: red;">¥{{order.total}}</view>
    <image v-if="order.createTime!=-1&&order.appointOrderProductNames.length!=0&&order.appointOrderProductNames.length!=0"  src="../../static/image/arrow.png"></image>
    <image v-if="order.createTime==-1&&order.appointOrderProductNames.length!=0" src="../../static/image/arrowDown.png"></image>
</view>

后来有了新的想法,需要按需出现点击事件,网上查到的方法是这样的

@click="clickFlag && addGoodsHandler()"

我尝试了这样:

@click="order.appointOrderProductNames.length!=0&&function(){if(order.createTime!=-1){order.createTime=-1;}else{order.createTime=1}}"

并不行,于是展开思考:

本来@clik只是写上方法的名字,仅在这一时间不涉及运行,点击事件触发,vue根据函数名去调用函数,所以将匿名函数写上去就行了,与写上函数名同理,事件触发页面自然会调用,但是网上查到的方法则不同:短路与操作,前面执行通过则执行后面的,这也是根本的不同:原本的写法不需要执行,但现在需要其在通过短路与后直接执行后面的方法,所以自然而然地想到了回调函数:

@click="order.appointOrderProductNames.length!=0&&(function(){if(order.createTime!=-1){order.createTime=-1;}else{order.createTime=1}})()"

测试一下,没有问题,小功告成.