如何在另一个文件中调用编辑组件？

Question

我有一个项目，这个项目是为购买汽车和许多其他操作的车主购买，但我有一个表中的几个列，在这些列中有一列我听取行动，这列包含一个按钮称为编辑，我想当我点击编辑按钮被用来修改此文件内的组件，我怎么做呢？它是编辑表单所在的编辑文件。Edit.vue：

<template>
  <v-row justify="center">
    <v-dialog v-model="editDialog" persistent max-width="1050px" height="400px">
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          fab
          accent
          class="grey lighten-1 margin pa-4"
          dark
          v-bind="attrs"
          v-on="on"
        >
          <v-icon>
            mdi-pencil
          </v-icon>
        </v-btn>
      </template>
      <v-card>
        <v-layout>
          <v-flex xs12>
            <div class="myfont pl-5">
              <v-card-title>
                <span> Edit Car</span>
              </v-card-title>
            </div>
          </v-flex>
        </v-layout>
        <v-divider xs12></v-divider>
        <v-layout>
          <v-flex xs12>
            <v-card-text>
              <v-container>
                <v-row>
                  <v-col cols="12">
                    <v-text-field
                      name="name"
                      label="Name"
                      id="name"
                      class="colorLabel"
                      v-model="editedName"
                      multi-line
                      required
                    ></v-text-field>
                  </v-col>
                  <v-col cols="12">
                    <v-text-field
                      name="priceOfSale"
                      label="Price Of Sale"
                      id="priceOfSale"
                      v-model="editedPrice"
                      class="colorLabel"
                      multi-line
                      required
                    ></v-text-field>
                  </v-col>
                  <v-col cols="12">
                    <v-text-field
                      name="numberOfSeats"
                      label="NumberOfSeats"
                      id="numberOfSeats"
                      v-model="editedNumberOfSeats"
                      multi-line
                      required
                    ></v-text-field>
                  </v-col>
                </v-row>
              </v-container>
            </v-card-text>
          </v-flex>
        </v-layout>
        <v-divider></v-divider>
        <v-layout>
          <v-flex xs12>
            <v-card-actions>
              <v-btn class="myfont pl-5 text-right" text @click="onSaveChanges">
                Save
              </v-btn>
              <v-btn
                class="myfont pl-5 text-center"
                text
                @click="editDialog = false"
              >
                Cancel
              </v-btn>
            </v-card-actions>
          </v-flex>
        </v-layout>
      </v-card>
    </v-dialog>
  </v-row>
</template>
<script>
import { mapActions } from "vuex";
import ActionsTypes from "../store/types/actions-types";
export default {
  props: ["car"],
  data() {
    return {
      editedName: this.car.name,
      editedPrice: this.car.price,
      editedNumberOfSeats: this.car.seatsNumber,
    };
  },
  methods: {
    ...mapActions({
      editCarInformations: ActionsTypes.EDIT_CAR_ACTION,
    }),
    onSaveChanges() {
      const UpdatedCar = { ...this.car };
      UpdatedCar.name = this.editedName;
      UpdatedCar.price = this.editedPrice;
      UpdatedCar.seatsNumber = this.editedNumberOfSeats;
      this.editCarInformations(UpdatedCar);
    },
  },
};
</script>

这个文件中有一个表，其中有几列，最后一列是Action，它包含Modify按钮，Modify按钮，当我按下它时，修改的范围被调用。viewAllCars：

<template>
  <v-app class="bg">
    <v-container>
      <v-card
        class="mx-auto mt-5 pa-3"
        max-width="100%"
        id="limited-products"
        :style="'border: 0px solid #D50000;'"
      >
        <v-btn class="red accent-4 color myfont pl-3" @click="onCreateCar">
          evict Cashig 
        </v-btn>
        <v-data-table
          :headers="tableHeaders"
          :items="loadedCarsGetter"
          :page.sync="page"
          :items-per-page="itemsPerPage"
          hide-default-footer
          class="elevation-1"
          @page-count="pageCount = $event"
        >
          <template #[`item.actions`]="{ item }">
            <v-btn icon @click="edit(item.id)">
              <v-icon>mdi-pencil</v-icon>
            </v-btn>
            <v-btn icon @click="delete (item.id)">
              <v-icon>mdi-delete</v-icon>
            </v-btn>
          </template>
        </v-data-table>  
        <!-- pagination -->
        <div class="text-center pt-2">
          <v-pagination v-model="page" :length="pageCount"></v-pagination>
          <v-text-field
            :value="itemsPerPage"
            label="Items per page"
            type="number"
            min="-1"
            max="15"
            @input="itemsPerPage = parseInt($event, 10)"
            class="pl-7 pr-7"
          ></v-text-field>
        </div>
      </v-card>
    </v-container>
  </v-app>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import ActionsTypes from "../../store/types/actions-types";
import GettersTypes from "../../store/types/getters-types";
export default {
  data() {
    return {
      page: 1,
      pageCount: 0,
      itemsPerPage: 10
    };
  },
  created() {},
  computed: {
    ...mapGetters({
      loadedCarsGetter: GettersTypes.GET_CAR_FORM_GETTER,
      tableHeaders: GettersTypes.GET_HEADERS_TABLE_GETTER,
    }),
  },
  mounted() {
    // this.loadedCarsGetter();
    this.loadedCarsAction();
  },
  methods: {
    ...mapActions({
      editcardispatcher: ActionsTypes.EDIT_CAR_ACTION,
      deletecardispatcher: ActionsTypes.DELETE_CAR_ACTION,
      loadedCarsAction: ActionsTypes.GET_ALL_CAR_ACTION
    }),
    edit() {
      this.editcardispatcher({});
    },
    delete(){
      this.deletecardispatcher(
        this.car.id
    )
    }
  },
};
</script>

Answer 1

首先，您不需要在Edit.vue中使用"v-row“。去掉它。

因为你有按钮作为激活器，你应该像Avraham提到的那样添加组件。但是您需要知道这种方法有一些注意事项。

，

• ，这会增加浏览器的内存使用量。
• 每个Edit.vue实例都将保留其中的数据，并保留用户可能进行的更改。你还得处理数据重置。

更好的解决方案是只添加Edit.vue的一个实例，并使用v-if在DOM中添加/删除组件。

这将使您的表使用一个Edit.vue实例，添加和删除组件将处理数据重置。

像这样的东西

在包含v-data-table的文件中，按如下方式更新模板

<template>
  ......
  <v-data-table ...>
    ...
    <template #[`item.actions`]="{ item }">
      <v-btn icon @click="edit(item.id)">
        <v-icon>mdi-pencil</v-icon>
      </v-btn>
      <v-btn icon @click="delete(item.id)">
        <v-icon>mdi-delete</v-icon>
      </v-btn>
    </template>
    ...
  </v-data-table>
  <edit :car="item" v-if="showEditDialog = true" @closed="showEditDialog = false" />
  ......
</template>

<script>
import Edit from 'Edit.vue'

export default {
  components: { Edit },
  data: () =({
    item: {},
    showEditDialog: false,
  }),
  methods: {
    edit(item) {
      this.item = item
      this.showEditDialog = true
    }
  }
}

</script>

在您的Edit.vue中，为"editDialog“属性添加一个监视器，以发出一个事件以从DOM中删除编辑对话框。

watch: {
  editDialog(val){
    if(!val)
      this.$emit('closed')
  }
}

并从Edit.Vue中删除此部件

      <template v-slot:activator="{ on, attrs }">
        <v-btn
          fab
          accent
          class="grey lighten-1 margin pa-4"
          dark
          v-bind="attrs"
          v-on="on"
        >
          <v-icon>
            mdi-pencil
          </v-icon>
        </v-btn>
      </template>

祝好运。

Answer 2

您应该在汽车查看器组件中导入Edit.vue组件，并使用它而不是编辑按钮：

...
<template #[`item.actions`]="{ item }">
  <!-- Pass the item to the `car` prop -->
  <edit :car="item" />
  <v-btn icon @click="delete (item.id)">
    <v-icon>mdi-delete</v-icon>
  </v-btn>
</template>
...
<script>
import Edit from 'Edit.vue' // make sure the path to the component is correct

export default {
  components: { Edit },
  ...
};
</script>