在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue v-for中定義一個變量如何點擊此列加減此變量？

vue v-for中定義一個變量如何點擊此列加減此變量？

場景：
圖片描述

v-for渲染出來的列表，我如何設(shè)一個數(shù)點擊加減號只變化此行的變量？

加減號的代碼，外面有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看看，感謝大佬！

回答
編輯回答
真難過

你的num得和list里的每個item關(guān)聯(lián)起來

2017年8月10日 05:49
編輯回答
蔚藍(lán)色

寫了個demo，你從接口拿到數(shù)據(jù)后，map數(shù)據(jù)通過this.$set給每項加上num屬性，當(dāng)然要注意this指向

循環(huán)時加上索引，點擊按鈕+時將index傳參過去，只改變當(dāng)前列表值的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>
2018年3月23日 04:02
編輯回答
糖果果

在list中的每個上都添加一個num對象用于存儲數(shù)量，之后就這么使用：

<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--
}
2017年3月26日 01:00
編輯回答
撿肥皂

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

2017年8月5日 20:14
編輯回答
不舍棄
      addCart () {
        if (typeof this.food.count === 'undefined') {
          Vue.set(this.food, 'count', 0)
          Vue.set(this.food, 'active', true)
          // Vue.set 可以直接往data里或接收的數(shù)據(jù)中添加
          // this.$set 需要執(zhí)行函數(shù)的時候傳值過來 然后往傳遞的值里添加
//          this.food.count = 0
        }
        this.food.count++
        // 默認(rèn)為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)
        }
      }
2018年1月19日 20:21
編輯回答
情殺
list:[
  {
    ...,
    num:0
  },
  {
    ...,
    num:0
  },
  ...
]

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

2018年1月27日 16:56