VueJS - Pass variable to this.{variable}

Question

I would like to have a property dynamically accessed with a variable.

For example, I have :

data(){
    redsection : '',
    bluesection : '',
},
methods(){
     changeColor(color, val){
          this.{color+"section"} = val;
     }
}

And what I'm trying to do it have a function in the view:

<button @click="changeColor("blue", "bar")>blue</button>
<button @click="changeColor("red", "bar")>blue</button>

Bert · Accepted Answer · 2017-05-04 16:11:44Z

8

Use an indexer.

this[color+"section"] = val;

Here is an example.

answered May 4, 2017 at 16:11

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

Comments

m.spyratos · Accepted Answer · 2017-05-04 16:19:21Z

2

You could also change it up a bit if you want to make it prettier, like this:

data(){
     section: {
          red : 'red',
          blue : 'blue'
     }
},
methods(){
     changeColor(color, val){
          this.section[color] = val;
     }
}

answered May 4, 2017 at 16:19

m.spyratos

4,2463 gold badges35 silver badges42 bronze badges

Collectives™ on Stack Overflow

VueJS - Pass variable to this.{variable}

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related