How to Dynamically change variables in Vue Js with a For Loop?

Question

Basically I have 5 foodNames variables. I want to change their values dynamically. Something like this:

        foodName1: '',
        foodAmount1: '',
        foodName2: '',
        foodAmount2: '',
        foodName3: '',
        foodAmount3: '',
        foodName4: '',
        foodAmount4: '',
        foodName5: '',
        foodAmount5: '',


addFood() {

      for (i=1; i < this.n; i++) {

       this.list.push(this.foodName{i});
       this.list.push(this.foodAmount{i});
       this.foods.push(this.list);
       this.list= [];
       this.foodName{i} = '';
       this.foodAmount{i} = '';
   }
        
}

How can I achieve that?

I only need to know how to use the 'i' of the for loop in the variable. — , Aug 19 '20 at 12:28
Does this answer your question? [Dynamically access object property using variable](https://stackoverflow.com/questions/4244896/dynamically-access-object-property-using-variable) — vchan, Aug 19 '20 at 13:04
Does this answer your question? [VueJS: Set variable name using string](https://stackoverflow.com/questions/55691495/vuejs-set-variable-name-using-string) — Alexandre Elshobokshy, Aug 19 '20 at 14:17

score 0 · Answer 1 · answered Aug 19 '20 at 12:33

0

you should put your food names in an array and access it with foodName[i]

answered Aug 19 '20 at 12:33

Jan

36
2

score 0 · Answer 2 · answered Aug 19 '20 at 12:42

0

You can access object property names dynamically using brackets:

this["foodName"+i] = "";

answered Aug 19 '20 at 12:42

artoju

1,612
12
12

it says 'i' is not defined – Aug 19 '20 at 14:23
It says 'foodName' isn't defined on the instance. – Aug 19 '20 at 14:34
Then you need to provide more code to see where the problem lies. – artoju Aug 20 '20 at 05:03

How to Dynamically change variables in Vue Js with a For Loop?

2 Answers2