Simplify data and method in vuejs

Question

I want to know can we simplify the use of data and method here so we don't need to define it one by one like this? Can we use an iteration or other ways?

export default {
  data() {
    return {
      key1 = false,
      key2 = false,
      key3 = false,
      .....
    }
  },
  methods:{
    onClick1 () {
      key1 = true
    },
    onClick2 () {
      key2 = true
    },
    onClick3 () {
      key2 = true
    },
    .....
  },
.....
}

On the component

<myComp @click="onClick1">One</myComp>
<myComp @click="onClick2">Two</myComp>
<myComp @click="onClick3">Three</myComp>
.....

Any help would be very helpful, thanks in advance!

Answer 1

First, the data property return an object, so you cant define variables there.

data() {
    return {
      key1: false,
      key2: false,
      key3: false,
      ...
    }
  }

In some cases you can change data directly on click events like:

<myComp @click="key1 = true">One</myComp>
<myComp @click="key2 = true">Two</myComp>
<myComp @click="key3 = true">Three</myComp>

It is not THE best practice, but it is helpful in some cases.

In most cases you need to use callbacks like the example made by "Majed Badawi" here.

Answer 2

Define a keys object in data and a generic function onClick in methods to set a certain key's value to true:

export default {
  data() {
    return {
      keys: { 1: false, 2: false, 3: false }
    }
  },
  methods:{
    onClick (key) {
      this.keys[key] = true
    }
  }
}

In the component, pass the key as follows:

<myComp @click="() => onClick(1)">One</myComp>
<myComp @click="() => onClick(2)">Two</myComp>
<myComp @click="() => onClick(3)">Three</myComp>