Simplify data and method in vuejs

user_17686806 0
Viewed 58

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!

vuejs2 html javascript
3 Answers

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

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.

user_137583210

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>

user_74990690
Related