Question

使用Vuetify表单时，我面临着一个非常奇怪的情况。我有一个Vuetify数据表，该数据表遵循文档中使用的示例以及一个实际上包含表单的对话框。我正在使用prop将数据从父级传递到孩子，我正在遵循Vue及其最佳实践，其中包括使用prop作为数据变量的初始值。然后，我使用填充表格。我可以编辑表单并提交新值，没有任何问题，但是我创建了一个取消按钮来清除表单。当我这样做时，它还会清除数据表中的父字段。就像表单重置是从子级传播到其父级一样。因此，使用下面的代码，当我清除child的形式时，{{props.item.order.dueDate}}将被清除。v-bind的行为不应该那样。

我花了太多时间试图找到原因，但找不到任何东西谢谢

这是数据表（父表）的代码

<template>
  <v-card>
    <v-card-title class="display-3">
      {{ tableTitle }}
      <v-spacer></v-spacer>
      <v-text-field
        v-model="search"
        append-icon="search"
        label="Search"
        single-line
        hide-details
      ></v-text-field>
    </v-card-title>
    <v-data-table
      :headers="headers"
      :search="search"
      :items="orderItems"
      item-key="_id"
      class="elevation-1"
      :expand="expand"
    >
      <template v-slot:items="props">
        <tr @click="props.expanded = !props.expanded">
        <td class="px-2">{{ props.item.id }}</td>
        <td class="text-xs px-2">{{ props.item.title }}</td>
        <td class="text-xs px-2">{{ props.item.order.date | date }}</td>
        <td class="text-xs px-2">{{ props.item.order.dueDate | date }}</td>
        <td class="text-xs px-2">{{ props.item.count }}</td>
        <td v-if="props.item.status" class="text-xs px-2">{{ props.item.status.type }}</td>
        <td v-else class="text-xs px-2">New Order</td>
        <td v-if="props.item.status" class="text-xs px-2"><span><v-icon color="green darken-2" v-if="props.item.status.signalSent">mail_outline</v-icon><v-icon @click.stop="sendSignal(props.item)" color="red darken-2" v-else>unsubscribe</v-icon> {{  props.item.status.datetime | date}}</span></td>
        <td v-else class="text-xs px-2">-</td>
        </tr>
    </template>
      <template v-slot:expand="props">
        <v-card flat>
          <list-orders-details v-bind:order="props.item"></list-orders-details>
        </v-card>
         <v-btn
          @click.stop="showDialog()"
          color="red darken-2"
          fixed
          dark
          small
          bottom
          right
          fab
        >
        <v-icon>edit</v-icon>
        </v-btn>
        <v-dialog v-model="editOrder" persistent>
            <edit-order-item ref="clearEdit" v-bind:itemChild="props.item"></edit-order-item>
            <v-btn class="cancel" dark color="red darken-2" @click="cancelEdit()">cancel</v-btn>
        </v-dialog>
      </template>
      <v-alert slot="no-results" :value="true" color="error" icon="warning">
        Your search for "{{ search }}" found no results.
      </v-alert>
  </v-data-table>
  </v-card>
</template>

在父脚本中：

cancelEdit() {
  this.editOrder=false
  this.$refs.clearEdit.clear()
}

和孩子的摘录：

<template>
 <v-form 
  @submit.prevent
  ref="form"
  class="white"
  >
  <v-container>
    <h4>Status</h4>
    <v-divider class="red darken-2"></v-divider>
    <v-layout row wrap  align-center justify-start>
      <v-flex xs12 sm4 md3>
      <v-select
        :items="status"
        v-model="orderItem.itemStatus.type"
        outline
        label="Status"
      ></v-select>
...

    export default {
  name: 'EditOrderItem',
  components: {
  },
  props: ['itemChild'],
  data() {
    return {
      dialog: false,
      order: {
        apikey: this.itemChild.order.apikey,
        orderId: this.itemChild.order.id,
        ...
     },
  },

  methods: {
         submit () {
           const formContent = {
            order_id: this.itemChild.order._id,
            item_id: this.itemChild._id,
            order: this.order,
            item: this.orderItem, 
            }
           console.log(formContent)
      },
      clear () {
        this.$refs.form.reset()

      }
  },

Vuetify表单重置会影响父绑定

0 个答案: