Array of Vue Components Changed by a Counter

Question

I have a view that will have a section with components that are already built. I want to take that information captured in each component and put it into a json object. The view looks like this:

<template>
  <v-row>
    <v-flex>
      <v-btn 
        :click="prevStep"
        v-if="counter != 0"
      >
        Back
      </v-btn>
      <v-btn 
        :click="nextStep"
        v-if="counter != component.length"
      >
        Next
      </v-btn>
      <keep-alive>
      <component :is="component[counter]"></component>
      </keep-alive>
      <v-btn 
        :click="submit" 
        v-if="counter == component.length"
      >
        Submit
      </v-btn>
...
</template>

<script>
import ALL THE COMPONENTS (3 total)

export default {
  name: "formSubmit",
  components: {
    comp1,
    comp2,
    comp3
  },
  
  data() {
    return {
      component: [
        'comp1',
        'comp2',
        'comp3'
      ],

      counter: 0,
    }
  },

  methods: {
    nextStep: function() {
      this.counter++;
    },

    prevStep: function() {
      this.counter--;
    }
  }
}
</script>

So if I hardcode counter to the correct array slot, it loads that component like I expect, but clicking my buttons does nothing and does not change which component is active. I have tried adding a console.log to each button method to display the current value of the counter, but nothing shows up - no entry in the console for counter at all.

Am I over-complicating this or have I just made a dumb error somewhere?

Change :click to @click. @ is the short code for v-on which is what you want for events like click. — Beyers
– Beyers, Commented Oct 29, 2020 at 20:21

Anatoly · Accepted Answer · 2020-10-29 20:18:05Z

2

You use click like a prop and not like an event. Replace both :click with @click:

<v-btn 
        @click="prevStep"
        v-if="counter != 0"
      >

...

<v-btn 
        @click="nextStep"
        v-if="counter != component.length"
      >

answered Oct 29, 2020 at 20:18

Anatoly

23.2k3 gold badges33 silver badges46 bronze badges

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

2 Comments

Beyers Over a year ago

Reference for short hand code vuejs.org/v2/guide/syntax.html#v-on-Shorthand

BampyRocket Over a year ago

Thanks. Frontend is not my strong suit, js is definitely new to me. I appreciate it.

Collectives™ on Stack Overflow

Array of Vue Components Changed by a Counter

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related