Assign data with method to vue data variable dynamic

Question

How can I assign data to a dynamic variable.

What I'm trying to achieve is this:

My vue data variable:

test: '',

Adding a click

<div @click="assignData(test)"

Method:

assignData(value) {
   // Now I don't want this
   this.test = 'lorem..';

   // Instead I want something like this
  value = 'new value for test';

  // Or
  this.value = 'new value for test';
}

Now obviously this is not gonna work, but I hope you'll get the idea.

I need to change many variables and I don't want to add all the variables in the function like this

assignData(value) {

   this.test = 'lorem..';
   this.anotherVar = 'ipsum';
   this.newTest = '....';       
}

Bergur · Accepted Answer · 2018-08-17 09:19:21Z

5

You could send the property you want to change with the function.

<div @click="assignData('test', 'new value for test)">

and then in your code

 assignData(prop,val) {
        this[prop] = val;
      console.log(this.test);
    }

Here is a snippet from jsfiddle: https://jsfiddle.net/49gptnad/6447/

answered Aug 17, 2018 at 9:19

Bergur

4,07714 silver badges21 bronze badges

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

4 Comments

twoam Over a year ago

How does that work when I want to target a key in an object? Example: assignData('test.user.name', 'new value for name)

Bergur Over a year ago

This code won't work for that. You would need to modify it. Is there a reason you don't want to use multiple functions one for each object? For example updateUser - updateCar - updateHome and have explicit statements what is mapped to what.

Bergur Over a year ago

Also where are you getting the values? From an input or http request or? If its inputs, then v-model might be the solution you are looking for. jsfiddle.net/49gptnad/6453

twoam Over a year ago

I need to assign Pixi objects everytime I click depending on the value. But I guess It can't be shortened.

user37309 · Accepted Answer · 2018-08-17 09:17:35Z

3

assignData(key, value) {
  this[key] = value;
}

You'll have to specify the variable you're assigning when you activate it with the click caller.

answered Aug 17, 2018 at 9:17

user37309

6346 silver badges14 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 22:50:52Z

2

You should use either vm.$set( target, key, value ) or Vue.set( target, key, value )

Vue.set docs

vm.$set docs

edited Jul 15, 2022 at 22:50

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 17, 2018 at 10:06

El Danielo

7801 gold badge8 silver badges19 bronze badges

Collectives™ on Stack Overflow

Assign data with method to vue data variable dynamic

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related