如何操作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 
     } 
    }) 
    } 
} 

这显然不是一个工作的例子，但给你的结构。