[Vuejs]-Access object with dynamic variable vue.js

by

0👍

✅

Using VueJS you should be able to assign your dynamic variable to a Vue Model when you load the new object using a Vue setter $set('property name', 'value')

Example AJAX retreival:

$.getJSON('myURL.html?query=xxx', function(data, textStatus, jqXHR){
    try{
        MyVue.$set('dynamicObject', data);
    }
    catch(e){}

});

A generic Vue may look like this:

var MyVue = new Vue({
el:'#exampleDiv',
data: {
           dynamicObject : ''
      }
});

Bound to an example HTML element:

<div id="exampleDiv">
    <label class="{{dynamicObject.activeuser}}">{{dynamicObject.username}}</label>
</div>

In the case that you have an object with an array of objects which also contain properties Vue makes it very simple to create many HTML elements (for each child object) by simply adding a v-repeat (example) to the desired HTML and assigning the datasource:

<div id="exampleDiv">
    <label v-repeat="dynamicObject" class="{{dynamicObject.activeuser}}"></label>
</div>
👤Douglas Tober

Leave a comment