vue js access property dynamically

Question

I am using vuejs two way binding to change a property in another component, by emiting an event.

This is how I send the event from cmponent 1:

<input
    v-model="form.title"
    @keyup="$root.$emit('updateItemEvent', {
        key: 'section.title',
        value: form.title
    })"
    type="text"
>

I want to use the same event in the componsnt many times with different "key" and "value".

Here is component 2 where I listen to the event

NOTE: section object could be in data or props

data() {
    return {
        section: {title:'old title', ...},
    },
},

mounted() {
    this.$root.$on('updateItemEvent', (data) => {
        // data variable structure is: {key:'section.title', value:'new modified title'}
        // data.key // is a key in this component data
        // data.value // the new value I want to assign to the data.key in this component
        //this is the problem, I want to access a property dynamically by name.
        //eg. this.section.title should be accessible like this "this.{data.key}"
        this.data.key = data.value// ---> this is the error, how to do something like this?
    })
},

how to access a property by name dynamically like this.data.key

If the components relationship in not parent-child then i think you should use vuex. Don't make you $root a mess. — Abregre
– Abregre, Commented Jul 28, 2021 at 10:29
no its not a parent chield. I am not using vue cli, I am using laravel inertia. no need for vuex here — Moauya Meghari
– Moauya Meghari, Commented Jul 28, 2021 at 10:31

hamid niakan · Accepted Answer · 2021-07-28 11:21:30Z

1

with the help of a recursive function you can rewrite the value of any nested object. check out the example below which rewrite the id value from 1 to 2 and the id is 3 levels deep in the data object:

const str = 'section.title.id';
const data = {
  section: {
    title: {
      id: 1
    }
  }
};
const keys = str.split('.');

function rewriteValue(srcObj, keys, value) {
  if (keys.length > 1) {
    const obj = srcObj[keys[0]];
    keys.shift();
    rewriteValue(obj, keys, value);
  } else srcObj[keys[0]] = value;
}

rewriteValue(data, keys, 2);
console.log(data);

answered Jul 28, 2021 at 11:21

hamid niakan

2,8891 gold badge15 silver badges26 bronze badges

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

Comments

theVelja · Accepted Answer · 2021-07-28 11:06:22Z

0

Even though I'm not sure what you're trying to achieve with your approach and if that approach is correct you can do what you want like this

mounted() {
    this.$root.$on('updateItemEvent', (data) => {
        const keys = data.key.split('.')
        this[keys[0]][keys[1]]=data.value
    })
},

answered Jul 28, 2021 at 11:06

theVelja

511 silver badge6 bronze badges

2 Comments

Moauya Meghari Over a year ago

I tried this and it works fine. but what if the key is "section.user.name" 3 or more levels deep in the object.

theVelja Over a year ago

Hamid gave you the answer on how you can automatically change the value based on depth automatically, but I need to say that if you need to do it like this you may need to think about changing your approach with the data, because if you're gonna do recursive function calls for each button up event your code is not performant at all...:)

Collectives™ on Stack Overflow

vue js access property dynamically

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related