[英]Vue.js add property to bound object
我有一個這樣的清單
<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>
該列表將按預期顯示。 這樣,綁定實體將作為道具添加到外部組件中。
<my-compontent :entityname="customers" :master="{{json_encode($customers->toArray())}}" inline-template>
如您所見,它應該是客戶列表。 為了表明是否選擇了客戶,我希望在點擊時設置“已選擇”屬性。 但是,如果默認的綁定對象沒有select屬性,這似乎不起作用。
methods: {
itemselect: function(item) {
this.master.data.forEach(function(el) {
el.selected = false;
});
item.selected = true;
}
}
顯示的方法似乎不起作用/無法觸發更改
而不是改變你的主數據,模型曲目選擇,使用$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;
}
}
如果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;
}
}
如果要修改道具傳遞的數據,則需要復制它,如果您嘗試直接修改道具,vue會拋出警告。 我可能會通過執行以下操作來處理此問題:
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: []
}
}
}
});
我只是模擬了實際輸入的數據,但是顯然這會將其添加到prop中,並照常傳遞給您的組件。 這是jsFiddle: https ://jsfiddle.net/xswtfkaf/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.