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变量中的实际含义。