CODEWITHSUNDEEP
vue.js
Jacdy Xu
Jacdy Xu

Reputation: 11

How to bind a dynamic Object with v-bind in vue

I would like to ask a question of v-bind dynamic object. When binding is a completely dynamic object, how to bind properties with operation expression? How do I keep the attr observable? thank you！

<template>
    <component v-bind="dynamicAttrs"></component>
</template>

    export default {
        data(){
            return {
                someObject:{
                    a:{
                        b:10
                    }
                },
                // This dynamicAttrs object is dynamically defined and save into the mysql database by the secondary development user, 
                // will load it from mysql for component init. 
                // All the properties of this object are dynamic, that is, how many properties are there, and the name of the property is dynamic.
                dynamicAttrs:{  
                    someAttr1:123,
                    someAttr2:"someObject.a.b + 500"   // How does this object with operation expressions bind? How do I ensure that it gets updated responsively, so that component gets the update automatically when `someobject.a.b` updated
                }
            }
        }
    }

The dynamicAttrs object is dynamically defined and save into the mysql database by the secondary development user, load it from mysql for component init.

How does this object with operation expressions bind? How do I ensure that it gets updated responsively, so that component gets the update automatically when someobject.a.b updated

Upvotes: 1

Views: 1360

Answers (1)

skirtle
skirtle

Reputation: 29132

Typically you'd use a computed property for this:

computed: {
  dynamicAttrs () {
    return {
      someAttr1: 123,
      someAttr2: this.someObject.a.b + 500
    }
  }
}

If someObject.a.b updates the computed property will be re-evaluated and the bindings will be updated.

Upvotes: 2

Related Questions