为数组的每个项目增加和减少一个数字答案

【问题标题】：increase and decrease a number for each item of array为数组的每个项目增加和减少一个数字
【发布时间】：2019-12-03 06:12:40
【问题描述】：

服务器发送的数据是一个对象数组。我用v-for 在模板中遍历它们。

当用户单击增加和减少按钮时，我需要显示每个项目在跨度中选择了多少。我用下面的例子简化了我的数据。 0 值是静态的。当用户单击按钮时，如何增加和减少每个项目的值？

let data = [
{type: 'car', color: 'white'
},{type: 'car', color: 'black'}
,.....]

<div v-for="(item, index) in data" :key="index">
  <div>
     {{item.color}}
     <div class='btn-group'>
      <button>increase</button>
       <span>0</span>  <----- how many selected
      <button>decrease</button>
     </div>
  </div>
<div>

【问题讨论】：

标签： arrays vue.js vuejs2

【解决方案1】：

在这里，检查这个例子。

<template>
  <div>
    <div
      v-for="(item, index) in records"
      :key="index">
      <div>
        {{ item.color }}
        <div class="btn-group">
          <button @click="increase(index)">
            +
          </button>
          <span>{{ item.val || 0 }}</span>
          <button @click="decrease(index)">
            -
          </button>
        </div>
      </div>
      <div />
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      records: [
        { type: 'car', color: 'white' },
        { type: 'car', color: 'black' },
      ],
    };
  },
  created() {
    this.fetchApi();
  },
  methods: {
    fetchApi() {
      axios.get('/your-url')
        .then((response) => {
          this.records = response.data.records.map((record) => {
            return {
              ...record,
              val: 0,
            };
          });
        });
    },
    increase(index) {
      this.records[index].val += 1;
    },
    decrease(index) {
      this.records[index].val -= 1;
    },
  },
};
</script>

希望对你有所帮助。

【讨论】：

谢谢，但是 val 0 在服务器响应中不可用。
我已经更新了示例。您可以看到我正在映射来自 api 调用的响应数据列表并添加一个 val: 0 属性。这样一来，所有的记录都会动态设置默认的0 vals，您可以以类似的方式使用这些值。

【解决方案2】：

请试试这个：

<div id="example-1">
  <div v-for="(item, index) in items" :key="index">
    <div>
       {{item.color}}
       <div class='btn-group'>
        <button v-on:click="addOne(index)">increase</button>
         <span>{{counter[index]}}</span>
        <button v-on:click="minusOne(index)">decrease</button>
       </div>
    </div>
  <div>
</div>

而你的 Vue 代码是这样的：

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0,
    items: [
      {type: 'car', color: 'white'},
      {type: 'car', color: 'black'}
    ],
    counter: []
  },
  methods: {
    addOne(index) {
      this.$set(this.counter, index, this.counter[index] + 1);
    },
    minusOne(index) {
      this.$set(this.counter, index, this.counter[index] - 1);
    },
  },
  mounted() {
    this.counter = Array(this.items.length).fill(0);
  }
})

【讨论】：