如何操作vuejs中的數據

Question

我正在使用vuejs構建一個小應用程序，我在這裏調用一個url來獲取一些數據。我需要在顯示數據之前操作數據。在響應中，我接收元件的陣列，其具有字段

client_name: "ABCD Company" 
event_type: 3 
type: "meeting" 
venue: "Mumbai" 
with_client: 1 

另外我有event_type不同的數據集，看起來像這樣：

events: [ 
    {value: 1, label: "One-on-One meeting"}, 
    {value: 2, label: "Group meeting"}, 
    {value: 3, label: "Broker Roadshow"}, 
    {value: 4, label: "Broker Conference"}, 
    {value: 5, label: "Site Visit"}, 
    {value: 6, label: "Only Management Meet"}, 
    {value: 7, label: "Only IR Meeting"} 
], 

和with_client是true或false。

所以基本上我最後的數據看起來就像是這樣的：

client_name: "ABCD Company", 
event_type: "Broker Roadshow", 
type: "meeting", 
venue: "Mumbai", 
with_client: "yes" 

目前我有一個v-for循環，看起來像這樣：

<tr v-for="(item, index) in meeting_data"> 
    <td class="text-center">{{ index+1 }}</td> 
    <td class="text-center">{{ item.client_names }}</td> 
    <td class="text-center">{{ item.type }}</td> 
    <td class="text-center">{{ item.event_type }}</td> 
    <td class="text-center">{{ item.with_client }}</td> 
    <td class="text-center">{{ item.schedule }}</td> 
    <td class="text-center"><router-link :to="{name: 'interaction-update', params: {id: item.id}}"><i class="fa fa-pencil-square-o text-navy"></i></router-link></td> 
    <td class="text-center"><a @click.prevent="deleteInteraction(item.id)"><i class="fa fa-trash-o text-navy"></i></a></td> 
</tr> 

Answer 1

使用計算。我們假設您的meeting_data是一組對象。如果它是一個對象，你在你的意見建議，然後向我們展示一個例子，我會更新的答案。

computed:{ 
    formattedData(){ 
    if (!this.meeting_data) return [] 

    return this.meeting_data.map(d => { 
     return { 
     client_name: d.client_name, 
     type: d.type, 
     // this find could blow up if the event_type doesn't exist 
     event_type: this.events.find(e => e.value == d.event_type).label, 
     with_client: d.with_client ? "yes" : "no", 
     venue: d.venue 
     } 
    }) 
    } 
}, 

迭代格式化的數據。

<tr v-for="(item, index) in formattedData"> 

Example。

根據你的筆，它會是這個樣子：

computed: { 
    tableFilter: function() { 
    // Do the filter 
    let interactions = this.model.interactions 
    if(this.model.interactions) 
    { 
     interactions = this.model.interactions.filter((item) => 
     item.client_names.includes(this.search_by_name) 
     && item.event_type.includes(this.search_by_event_type)); 
    } 

    if (!interactions.length > 0) return [] 

    // Return formatted data 
    return this.interactions.map(d => { 
     return { 
     client_name: d.client_name, 
     type: d.type, 
     // this find could blow up if the event_type doesn't exist 
     event_type: this.events.find(e => e.value == d.event_type).label, 
     with_client: d.with_client ? "yes" : "no", 
     venue: d.venue 
     } 
    }) 
    } 
} 

這顯然不是一個工作的例子，但給你的結構。