我正在尝试使用计算属性来选择使用Vue。
这是我正在使用的小提琴:https://jsfiddle.net/2m18ab1v/13/
以下是我的视图模型:
var vm = new Vue({
el: "#app-container",
data: {
offer: {
unit: '',
tags: '',
},
protocol: protocol
},
computed: {
getUnits: function(){
var unitsList = [];
var tagList = this.offer.tags.split(",");
console.log(tagList);
for (var i=0; i<tagList.length; i++){
unitsList += this.protocol[tagList[i]]["units"];
}
console.log(unitsList);
return unitsList;
}
}
});
数据中引用的'protocol'对象:
var protocol = {"wireless":
{
"units": {"bandwidth": "bit/s", "distance": "kilometers"},
"children": [],
}
我希望<select>
选择“bit / s”和“km”。我一直在我的模板中尝试这样的事情:
<div id="app-container">
<select v-model="offer.unit">
<option v-for="item in getUnits" v-bind:value="value">
{{ item }}
</option>
</select>
</div>
console.log(unitsList)
返回Object { bandwidth: Getter, distance: Getter, 1 more… }
显然,我想要的是某种对象。我对Vue有些陌生,我想弄清楚“Getter”是如何工作的。有没有直接的方法来获得它的价值?
答案 0 :(得分:1)
当您尝试收集单位时,在js中使用+=
并不能获得所需的结果。在此working fiddle中,我使用了concat
代替units
下的wireless
。 (假设您在与wireless
相同的数据树级别上拥有其他协议类别)根据您的实际需要,您可能需要push
。看看他们的文档:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push