Как обновить счетчик внутри vl oop in vue. js?

Question

Как я могу отдельно обновить счетчики внутри v-for? Теперь он обновляет оба при увеличении, так как список может быть динамическим. c Я не могу устанавливать переменные для всех типов.

Код, который я запускаю внутри v-for:

<a @click.prevent="decrease(quote, min)">
    Decrease
</a>

<input name="types" type="text" v-model="quote" >

<a @click.prevent="increase(quote, max)">
    Increase
</a>

Это выглядит так:

введите описание изображения здесь

А вот скрипт vue:

<script>
    var app = new Vue({
        el: "#contents",
        data: {
            quote: 1,
        },
        computed: {
          
        },
        methods: {
            decrease: function(quote, min){
                app.quote--;
                if(app.quote < min){
                    app.quote = min;
                }
            },
            increase: function(quote, max){
                if(app.quote > max){
                    app.quote = max;
                }
            },
    
        },
    });
</script>

Answer 1

Вы должны сделать что-то вроде этого:

<template>
  <div>
    <div v-for="item in d" :key="item">
      <Counter></Counter>
    </div>
  </div>
</template>

<script>
import Counter from "./Counter.vue";
export default {
  name: "HelloWorld",
  components: { Counter },
  props: {
    msg: String
  },
  data: () => {
    return {
      d: [1, 2]
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>


/// counter component with its own state

<template>
  <div>
    <div>
      <span>{{count}}</span>
      <button v-on:click="increment">increment</button>
      <button v-on:click="decrement">decrement</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Counter",

  data: () => {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

демонстрация: https://codesandbox.io/s/silly-solomon-0hk16?file= / src / components / Counter. vue: 0-516

идея состоит в том, что вы должны поместить logi c внутри каждого компонента, но в вашем случае вы устанавливаете только одно состояние и пытаетесь поделиться им для многих экземпляров, вместо этого вы должны создать повторно используемый компонент с его собственным состоянием, как в моем случае: count