Question

我正在尝试通过一种方法来更新内联编辑数据表中的值，但是我遇到了一些问题，即我传递的项目没有得到更新。

我将props.item传递给我定义的cancel方法进行更新。 props.item.iron道具已同步，因此仍应通过编辑对话框进行更新。

 <template v-slot:item.iron="props">
          <v-edit-dialog
            :return-value.sync="props.item.iron"
            large
            persistent
            @save="save"
            @cancel="cancel(props.item)"
            @open="open"
            @close="close"
          >
            <div>{{ props.item.iron }}</div>
            <template v-slot:input>
              <div class="mt-4 title">Update Iron</div>
            </template>
            <template v-slot:input>
              <v-text-field
                v-model="props.item.iron"
                :rules="[max25chars]"
                label="Edit"
                single-line
                counter
                autofocus
              ></v-text-field>
            </template>
          </v-edit-dialog>
       </template>

我尝试更新传入的obj，但更改未反映或传递回模型。

   cancel (item) {
      console.log(item)
      item.iron = 'clear'
    }

是否有解决方法，可以从编辑对话框外部从外部更新prop.item？我的主要用例是保存新值时发出请求，但是如果请求失败，我想从表中清除该值。

Codepen：https://codepen.io/dicquack/pen/zYxGOQx?editors=1011 具体是第116行

编辑：因此，通过从v-edit-dialog返回值中取出.sync，并将内部文本框从v-model更改为:value，我可以在编辑对话框之外修改该值。我遇到另一个问题，现在我需要将新的文本框:value传递给编辑对话框，然后将其传递给保存处理程序。

CodePen已相应更新

Answer 1

在这种情况下，您必须将更新后的iron值传递给save()并引用更新后的对象，让我们使用name（在实际示例中使用一些唯一的ID）

          <v-edit-dialog
            :return-value.sync="props.item.iron"
            large
            persistent
            @save="save({name : props.item.name, props.item.iron})"
            @cancel="cancel(props.item)"
            @open="open"
            @close="close"
          >

在save（）实现中，根据name字段更新Data对象内部的铁字段，

save({name, iron}){
//  update `iron` in Data object based on `name` 
}

可以通过方法

1 个答案: