问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

vue v-for中定义一个变量如何点击此列加减此变量？

头像
xzzz
    318889116

    场景：
    图片描述

    v-for渲染出来的列表，我如何设一个数点击加减号只变化此行的变量？

    加减号的代码，外面有v-for="(item,index) in list"：

    <div style="position: absolute;right: 10px;top: 50%;margin-top: -13px;">
    <img @click="reduce(index)" src="/static/img/quantity-minus@2x.png">
    <span style="margin: 0 3px;">{{num}}</span>
    <img @click="add(index)" src="/static/img/quantity-add@2x.png">
</div>

//加
add(index){
    console.log(index)
    this.num++
},
//减
reduce(index){
    console.log(index)
    this.num--
},

    这样写所有num会同时变化= =!

    道理我都懂，就是写不出来，能不能写个demo看看，感谢大佬！

    htmljavascript前端框架前端vue.js
    阅读 8k
    6 个回答
    得票最新
    头像
    Reachel
      2.6k1114
      ✓ 已被采纳

      写了个demo，你从接口拿到数据后，map数据通过this.$set给每项加上num属性，当然要注意this指向

      循环时加上索引，点击按钮+时将index传参过去，只改变当前列表值的num

      <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>test</title>
  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.js"></script>
</head>
<body>

<div id="app">
  <div v-for="(item,index) in goods">
    {{item.name}}
    {{item.num}}
    <button @click="add(index)">+</button>
  </div>
</div>
</body>
</html>

<script>
var app = new Vue({
  el:'#app',
  data:{
    goods:[
      {name:1},
      {name:2},
      {name:3}
    ],
  },
  mounted(){
    this.goods.map((v,i)=>{
      this.$set(v,'num',1)
    })
  },
  methods:{
    add(index){
      this.goods[index].num++;
    }
  }
})
</script>
      头像
      luozz
        5.8k3629

        在list中的每个上都添加一个num对象用于存储数量，之后就这么使用：

        <div style="position: absolute;right: 10px;top: 50%;margin-top: -13px;">
    <img @click="reduce(index)" src="/static/img/quantity-minus@2x.png">
    <span style="margin: 0 3px;">{{item.num}}</span> <!-注意这里绑定的是list中的num变量，这样每个都是独立的了->
    <img @click="add(index)" src="/static/img/quantity-add@2x.png">
</div>

//加
add(index){
    this.list[index].num++
},
//减
reduce(index){
    this.list[index].num--
}
        头像
        月影
          2.7k1724
                addCart () {
        if (typeof this.food.count === 'undefined') {
          Vue.set(this.food, 'count', 0)
          Vue.set(this.food, 'active', true)
          // Vue.set 可以直接往data里或接收的数据中添加
          // this.$set 需要执行函数的时候传值过来 然后往传递的值里添加
//          this.food.count = 0
        }
        this.food.count++
        // 默认为true
        if (this.food.active) {
          this.vxaddCart(this.food)
          this.food.active = false
        }
      },
      decreaseCart () {
        this.food.count--
        if (this.food.count === 0) {
          this.vxdecreaseCart(this.food)
        }
      }
          头像
          伍陆柒
            1.2k1313

            要操作list 中的 每个item中的num才可以

            头像
            厦冰
              8.5k52638

              你的num得和list里的每个item关联起来

              头像
              silence
                389412
                list:[
  {
    ...,
    num:0
  },
  {
    ...,
    num:0
  },
  ...
]

                拿到index 就可以改变num list[index].num++

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题
                宣传栏