How to dynamically add part of an object with an arg in a vue method

Question

Super simple question but i've never been able to solve it. Say we have some data:

section: {
  option1: true,
  option2: true
}

and on a button we have:

<button @click="toggle(option1)">

How do I dynamically paste 'option1' arg into something like this:

toggle(opp){
console.log(this.section.opp)
}

Because currently it's literally looking for this.section.opp, and opp doesn't exist in the data.

toggle('option1') and console.log(this.section[opp]) - just as it always is in javascript :p — Bravo
– Bravo, Commented Mar 23, 2022 at 7:32
@JackSumner I added an answer. Hope that will work as per your expectation. — Rohìt Jíndal
– Rohìt Jíndal, Commented Mar 23, 2022 at 9:29

Rohìt Jíndal · Accepted Answer · 2022-03-23 09:29:21Z

1

Use this.section[opp] instead of this.section.opp as opp contains dynamic value and can not access directly with dot(.) notation as it is containing a different value.

Working Demo :

new Vue({
  el: '#app',
  data: {
    section: {
      option1: true,
      option2: true
    },
    result: null
  },
  methods: {
    toggle(opp) {
      this.result = this.section[opp];
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="toggle('option1')">Click Me</button>
  <p>Result: {{ result }}</p>
</div>

answered Mar 23, 2022 at 9:29

Rohìt Jíndal

27.3k16 gold badges80 silver badges133 bronze badges

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

Collectives™ on Stack Overflow

How to dynamically add part of an object with an arg in a vue method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related