CODEWITHSUNDEEP
javascripthtmlvuejs2
zhera zhera
zhera zhera

Reputation: 59

Simplify data and method in vuejs

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!

Upvotes: 3

Views: 107

Answers (3)

tuhin47
tuhin47

Reputation: 6058

You can take an array and loop through that as below.

Note: use this.$set to update the array value in dom as well.

new Vue({
  el: '#app',
  data() {
    return {
      keys: [false, false, false, false, false]
    }
  },
  methods: {
    onClick(index) {
      this.$set(this.keys, index, true)
    }
  }

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id='app'>
  <div v-for="(item,index) in keys" @click="() =>  onClick(index)">Index-{{index}}</div>
  <pre> {{keys}}</pre>
</div>

Upvotes: 1

thidzz
thidzz

Reputation: 303

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.

Upvotes: 2

Majed Badawi
Majed Badawi

Reputation: 28414

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>

Upvotes: 2

Related Questions