Quasarを使用してデータテーブルのセルを編集可能な特定の行にする方法は？

Question

私はdata tableコンポーネントをQuasarで使用しています。私はテーブルを見ることができ、それは素晴らしいです。ここをクリック

ここで、行セルをクリックして編集可能な入力テキストフィールドにする必要があります。「Enter」ボタンを押すと、そこにデータを保存する必要があります。 さらに進めるには？私を助けてください。

Answer 1

最初に、行を編集するためのデータテーブルの組み込み機能が見つかりませんでした。だから私は自分のカスタム機能で動くことを考えました。 QuasarのDataテーブルの良い点は、任意の行を操作するためにテンプレートを使用できることです。

だから私はこのようなテンプレートを使用：

<template slot="col-Name" scope="cell"> 
      <span @click = "nameAction()">{{cell.data}}</span> 
      <input type="text" 
       v-model="cell.data" v-show="edit1" v-on:keyup.enter="edit1 = false;"> <br> 
     </template> 

だからここに私は列（名前）の行のいずれかをcosidering、行のクリック時にnameActionと呼ばれる関数を呼んでいます。ここで

nameAction: function (row) { 
    this.edit1 = true 
} 

私は行をクリック上の入力フィールドを可視化しています： そして、ここでは、メソッド内の関数です。 参考のため、これはfiddleです。