Vuejsのオブジェクト要素呼び出し関数

Question

テーブルセルの個々の内容を設定する関数を使いたいと思います。私は<strong>で状況をラップしたい。この例では - タグ （私のアプリケーションでそれを複数回使用されるコンポーネントに保存されているので、私は、テンプレートを編集してはいけない...）

tableData: [ 
    { 
    "name": "test1", 
    "status": "1" 
    }, 
    { 
    "name": "test2", 
    "status": "0" 
    }, 
    { 
    "name": "test3", 
    "status": "1" 
    } 
], 
columns: { 
    name: { 
    title: "name" 
    }, 
    status: { 
    title: "status", 
    content: function(entry) { 
     return "<strong>" + entry.status + "</strong>"; 
    } 
    } 
} 

私はv-forループでvalue.content.call()のようなスムースを試しましたが、これはうまくいきません。

JsFiddle：https://jsfiddle.net/7anuorbu/4/

Answer 1

あなたはビューでHTMLのレンダリングの世話をするv-htmlの助けを、使用することができます。両方の要素がコンテンツを持っている必要がありますように私は、同様columnsデータを変更したこの作品を作るために

<tr v-for="entry in tableData"> 
    <td v-for="(value, key) in columns" v-html="value.content(entry)"> 
    </td> 
</tr> 

：HTMLでは、あなたは次のように関数を呼び出すことができます。

columns: { 
     name: { 
     title: "name"  , 
     content: function(entry) { 
      return "<span>" + entry.name + "</span>"; 
     } 
     }, 
     status: { 
     title: "status", 
     content: function(entry) { 
      return "<strong>" + entry.status + "</strong>"; 
     } 
     } 

全体の作業コードはhereです。