vue处理element-ui InputNumber 计数器 多个绑定
写项目时遇到这么个情况,把数据渲染出来后,多个计数器怎么绑定数据我的解决方法:/edit// v-for="(item, index) in shoppingCard"<div class="num"><Counter :num="item.num"><template slot-scope="scope"><el-input-numbersize="mi
·
写项目时遇到这么个情况,把数据渲染出来后,多个计数器怎么绑定数据
我的解决方法:
/edit
// v-for="(item, index) in shoppingCard"
<div class="num">
<Counter :num="item.num">
<template slot-scope="scope">
<el-input-number
size="mini"
v-model="scope.num"
:min="1"
@change="handleCounterChange(index, scope.num)">
</el-input-number>
</template>
</Counter>
</div>
handleCounterChange (index, num) {
// 同步仓库内的购物车数据
// import { mapState, mapMutations } from 'vuex'
this.shoppingCard[index].num = num
this.setShoppingCard(this.shoppingCard)
}
// counter组件
<template>
<div class="counter">
<slot :num="num"></slot>
</div>
</template>
<script>
export default {
name: 'Counter',
props: ['num']
}
</script>
<style lang="stylus" scoped></style>
更多推荐
已为社区贡献1条内容
所有评论(0)