javascript - 单击时动态创建 Vue 组件

Question

我有一个订单列表，我正在通过 orders 数组填充这些订单。这些订单中的每一个都具有用户可以编辑这些订单的功能。当用户单击编辑按钮时，我试图生成一个 vuetify 对话框组件，该按钮将具有该订单的默认数据，用户可以选择编辑这些数据。到目前为止，我已经尝试过了，

<tbody class="items">
  <tr v-for="order in orders" :key="order.name">
    <td>{{ order.fullname }}</td>
    <td>{{ order.address }}</td>
    <td>{{ order.phone }}</td>
    <!-- <td>{{ order.orderQuantity }}</td> -->
    <td>{{ order.quantity }}</td>
    <td v-if="order.status == true">
      <v-chip small outlined class="ma-2 chip" color="green">delivered</v-chip>
    </td>
    <td v-if="order.status == false">
      <v-chip small outlined class="ma-2 chip" color="red">in progress</v-chip>
    </td>
    <td>
      <!-- <component v-bind:is="component"></component> -->
      <!-- <EditOrder></EditOrder> -->
      <v-dialog v-model="dialog" persistent max-width="290">
        <template #activator="{ on, attrs }">
          <v-btn icon color="primary" dark v-bind="attrs" v-on="on"> Open Dialog </v-btn>
        </template>
        <v-card>
          <v-card-title class="headline"> Use Google's location service? </v-card-title>
          <v-card-text>{{ phone }}</v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="green darken-1" text @click="dialog = false"> Disagree </v-btn>
            <v-btn color="green darken-1" text @click="dialog = false"> Agree </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </td>
  </tr>
</tbody>

但这会在实际组件加载之前生成对话框的 n 个实例。我也尝试过使用异步组件，但无法找出我错在哪里。

这是我认为应该发生的； 当用户单击“编辑订单”按钮时，必须自动生成并销毁具有该特定订单的默认订单详细信息的对话框组件。 如果我错了，请纠正我。

Answer 1

1. 将dialog 部分移至单独的组件
2. 在parent组件中，在开始时使用一次，dialog=false初始隐藏
3. 为子组件添加一个data属性orderToEdit，这将是一个prop
4. 对于列表中的每个订单，添加一个编辑按钮，当点击传递 order
时，该按钮将调用一个方法
5. 在此方法中，将 orderToEdit 设置为所点击项目的传递 order 并设置 dialog=true 以使用自定义值显示它

const dialogmodel = Vue.component('btn', {
  template: '#dialogmodel',
  props: { order: Object, value: Boolean },
  computed: {
    dialog: {
      get () { return this.value; },
      set (value) { this.$emit('close', value); }
    }
  }
});

new Vue({
  el:"#app",
  vuetify: new Vuetify(),
  components: { dialogmodel },
  data: () => ({
    orders: [
      { name:"1", fullname:"fullname1", address:"address1", phone:"phone1", quantity:"quantity1", status:false },
      { name:"2", fullname:"fullname2", address:"address2", phone:"phone2", quantity:"quantity2", status:true }
    ],
    dialog:false,
    orderToEdit: {}
  }),
  methods: {
    closeDialog(value) { this.dialog = value; },
    editOrder(order) { this.orderToEdit = order; this.dialog = true; }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<template id="dialogmodel">
  <div>
    <v-dialog v-model="dialog" max-width="290" persistent>
      <v-card>
        <v-card-title class="headline">
          {{ order.fullname }}
        </v-card-title>
        <v-card-text> {{ order.address }} </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" text @click="$emit('close')">
            Disagree
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<v-app id="app">
  <div>
    <dialogmodel v-model="dialog" :order="orderToEdit" @close="closeDialog" />
  </div>
  <div>
    <table>
      <tbody class="items">
        <tr v-for="order in orders" :key="order.name">
          <td>{{ order.fullname }}</td>
          <td>{{ order.address }}</td>
          <td>{{ order.phone }}</td>
          <td>{{ order.quantity }}</td>
          <td v-if="order.status == true">
            <v-chip small outlined class="ma-2 chip" color="green">delivered</v-chip>
          </td>
          <td v-if="order.status == false">
            <v-chip small outlined class="ma-2 chip" color="red">in progress</v-chip>
          </td>
          <td>
            <v-btn @click="editOrder(order)">Edit</v-btn>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</v-app>