使用动态变量访问对象 vue.js

Question

这是我的对象

var users ={
  twitter : {
     name : //,
     lastname : //
  },
  facebook : {
     name : //,
     lastname : //
  }
}
}

我有一个动态变量 activeuser，它从 Facebook 更新到 twitter。我想做的是根据 activeuser 的值引用用户中的内部对象。我需要给我的 div 这样的东西 class :

<div class=' {{users.activeuser}}'></div>

我知道 vue.js 不应该这样做。你有什么建议吗？

谢谢！

Answer 1

使用 VueJS，当您使用 Vue 加载新对象时，您应该能够将动态变量分配给 Vue 模型 setter $set('property name', 'value')

示例AJAX检索：

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

});

通用的 Vue 可能如下所示：

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

绑定到示例HTML元素：

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

如果您有一个包含对象数组的对象，该对象数组还包含属性 Vue 使得创建许多 HTML 元素（对于每个子对象）变得非常简单，只需添加一个 v-repeat (example) 到所需的 HTML 并分配数据源：

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

access object with dynamic variable vue.js