[英]Vue.js add property to bound object
I have an list like this one 我有一个这样的清单
<div class="list-group entity-list">
<a v-for="entity in master.data"
:class="['entity list-group-item', entity.selected ? 'selected' : '']"
@click="itemselect(entity)"
>
@{{entity.name}}
</a>
</div>
The list is displayed as expected. 该列表将按预期显示。 The Bound entity is added as an prop to an outer compontent like this.
这样,绑定实体将作为道具添加到外部组件中。
<my-compontent :entityname="customers" :master="{{json_encode($customers->toArray())}}" inline-template>
As you can see it should be a list of customers. 如您所见,它应该是客户列表。 To indicate if a customer is selected i want to set an "selected" attribute on click.
为了表明是否选择了客户,我希望在点击时设置“已选择”属性。 However it does not seem to work if the default bound object does not have a select property.
但是,如果默认的绑定对象没有select属性,这似乎不起作用。
methods: {
itemselect: function(item) {
this.master.data.forEach(function(el) {
el.selected = false;
});
item.selected = true;
}
}
The shown method does not seem to work / trigger a change 显示的方法似乎不起作用/无法触发更改
Instead of altering your master data, track selection in model, using $index
assuming you don't reorder your master.data
而不是改变你的主数据,模型曲目选择,使用
$index
假设你没有重新排序master.data
<div class="list-group entity-list">
<a v-for="entity in master.data"
:class="eClass[$index]"
@click="itemselect($index)"
>
@{{entity.name}}
</a>
</div>
methods: {
itemselect: function(idx) {
if ( 0 > this.selected.indexOf(idx) ) {
this.selected.push(idx)
}
}
}
computed : {
eClass : function () {
var r=[];
for (var i= 0;c=this.master.data[i];++i) {
r[i] = {'selected': -1 < this.selected.indexOf(i),'entity list-group-item':true};
}
return r;
}
}
if entity
has am unique id 如果
entity
具有唯一ID
<div class="list-group entity-list">
<a v-for="entity in master.data"
:class="eClass[entity.id]"
@click="itemselect(entity.id)"
>
@{{entity.name}}
</a>
</div>
methods: {
itemselect: function(idx) {
if ( 0 > this.selected.indexOf(idx) ) {
this.selected.push(idx)
}
}
}
computed : {
eClass : function () {
var r={};
for (var i= 0;c=this.master.data[i];++i) {
r[c.id] = {'selected': -1 < this.selected.indexOf(c.id),'entity list-group-item':true};
}
return r;
}
}
If you want to modify data passed in by a prop then you need to copy it, vue will throw out a warning if you try to directly modify a prop. 如果要修改道具传递的数据,则需要复制它,如果您尝试直接修改道具,vue会抛出警告。 I would probably handle this by doing something like:
我可能会通过执行以下操作来处理此问题:
new Vue({
el: '#app',
created() {
// Assume this is passed in by a prop
var myData = {master: {
data: [{
name: 'foo'
}, {
name: 'bar'
}, {
name: 'baz'
}]
}};
// Copy data from prop
myData.master.data.forEach(el => {
var obj = {
name: el.name,
selected: false
};
this.master.data.push(obj);
});
},
methods: {
itemselect(item) {
this.master.data.forEach(el => {
// if this element is selected set to true
el['selected'] = (el.name == item.name);
});
}
},
data() {
return {
master: {
data: []
}
}
}
});
I just mocked the actual data coming in, but obviously this would add this to a prop and pass it to your component as usual. 我只是模拟了实际输入的数据,但是显然这会将其添加到prop中,并照常传递给您的组件。 Here's the jsFiddle: https://jsfiddle.net/xswtfkaf/
这是jsFiddle: https ://jsfiddle.net/xswtfkaf/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.