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 
     } 
    }) 
    } 
} 

。