How to update counter inside a v-loop in vue.js?

Question

How can I i update the counters separatly inside v-for? Now it updates both when incrementing, since the list can be dynamic i cant set variables for all the types.

The code i run inside the v-for is:

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

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

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

It looks like:

And here is the vue script:

<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>

what about putting the counter in a component ? In the v-for you load the component. — Tim Zwinkels
– Tim Zwinkels, Commented Aug 3, 2020 at 11:48
You only have one instance of quote attribute shared between all your counters. If you want them to behave on their own, they need to have their own quote data attribute. As suggested, each counter should be a component implementing a quote attribute — Pierre Burton
– Pierre Burton, Commented Aug 3, 2020 at 12:03

Asking · Accepted Answer · 2020-08-03 12:15:42Z

1

You should do something like this:

<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>

demo: https://codesandbox.io/s/silly-solomon-0hk16?file=/src/components/Counter.vue:0-516

The idea is that you should put the logic inside each component, but in your case you set just one state ant try to share it for many instance, instead you should create a reusable component with its own state, like in my case : count

answered Aug 3, 2020 at 12:15

Asking

4,26621 gold badges84 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Asking Over a year ago

@sdfgg45, let me know if my answer helped you.

sdfgg45 Over a year ago

I will test this out in a minute :)

sdfgg45 Over a year ago

using the cdn version on this project :)

Collectives™ on Stack Overflow

How to update counter inside a v-loop in vue.js?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related