Vue.js新添加的元素不起作用

Question

我在應用程序中創建了像contenteditable這樣的功能。 它工作正常，我可以編輯和保存數據，但是后來發現使用此功能無法編輯新添加的數據。 我使用obt.edited參數激活編輯模式。 即使我可以將新添加的元素的obt.edited設置為TRUE，但表單輸入也不會顯示。 我必須刷新頁面，以便我的contenteditable可以正常工作這是我的vue.js代碼

getData: function(page){
    this.$http.get("obat/getObat", function(data, status, response){
    this.$set('obat', data);
  })
},
editData: function(obat){
  obat.edited = true;
  obat.namaBeforeEdit = obat.nama;
},
doneEdit: function(obat,index){
  obat.edited = false;
  this.$http.post("obat/simpanObat", obat, function(data, status, response){
    this.obat[index] = obat;
  })
},
cancelEdit: function(obat){
  obat.edited = false;
},

這是我的控制器代碼，在其中我將edited屬性添加到從數據庫中獲取的每個數據中

public function getObat()
{
    $query = $this->obat_m->get(null,null,null);
    foreach ($query->result() as $row) {
        $data[] = array(
                    'id'    => $row->id_obat,
                    'nama'  => $row->nama,
                    'harga' => $row->harga,
                    'stok'  => $row->stok,
                    'edited'=> false
                    );
    }

    echo json_encode($data);
}

那是我的看法

<tbody>
              <tr v-for="obt in obat" track-by="$index">
                <td v-text="$index + 1"></td>
                <td v-if="!obt.edited">{{ obt.nama }}</td>
                <td v-if="obt.edited"><input type="text" name="editNamaObat" v-model="obt.nama"></td>
                <td v-if="!obt.edited">{{ obt.harga }}</td>
                <td v-if="obt.edited"><input type="text" name="editHargaObat" v-model="obt.harga"></td>
                <td v-if="!obt.edited">{{ obt.stok }}</td>
                <td v-if="obt.edited"><input type="text" name="editStokObat" v-model="obt.stok"></td>
                <td></td>
                <td class="text-center" v-if="obt.edited">
                   <button type="button" class="btn btn-success" @click="doneEdit(obt, $index)"><i class="fa fa-fw fa-hd"></i> Save Changes</button>
                    <button type="button" class="btn btn-danger" @click="cancelEdit(obt)"><i class="fa fa-fw fa-remove"></i> Cancel Editing</button>
                </td>
                <td class="text-center" v-if="!obt.edited">
                    <button type="button" class="btn btn-success" @click="editData(obt)"><i class="fa fa-fw fa-edit"></i> Ubah</button>
                    <button type="button" class="btn btn-danger" @click="removeData(obt.nama, $index)"><i class="fa fa-fw fa-remove"></i> Hapus</button>
                </td>
              </tr>
            </tbody>

Answer 1

首先，您應該在執行POST調用后添加一些驗證。 在這里，您只需將變量設置為對象。

其次，我們沒有創建數據的代碼，只有更新。 我的猜測是，您創建的對象不包含已edited屬性。 要檢查此屬性，您可以使用Vue DevTools直接了解Vue變量中的實際含義。