自动完成内的对话框 - vuetify答案

【问题标题】：Dialog inside autocomplete - vuetify自动完成内的对话框 - vuetify
【发布时间】：2021-01-03 10:57:23
【问题描述】：

我正在尝试在自动完成组件中放置一个对话框

<v-autocomplete v-model="item.selected_item"
 :items="items"
 item-text="name"
 return-object
 single-line
 @change="setItemId(item)"
>
  <div slot="prepend-item">
      <add-item></add-item>
  </div>
</v-autocomplete>

组件<add-item>的代码

<v-dialog persistent v-model="dialog" width="500">
  <template v-slot:activator="{ on, attrs }">
      <v-btn  text block v-bind="attrs" v-on="on">{{__("Add Item")}}</v-btn>
  </template>
  <v-card>
  </v-card>
</v-dialog>

现在，对话框按钮实际上显示在自动完成中，但问题是对话框会在任何鼠标单击时自动消失，

我注意到这在某种程度上与自动完成组件有关，我尝试将 <add-item> 组件放在自动完成之外，它工作正常。

如何解决？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

您可以将按钮和对话框本身分开，然后在单击按钮时控制对话框，而不是将整个 <add-item/> 放在自动完成中。我们的解决方案可以基于此example。我们将声明一个变量dialog，它将控制add-item 对话框的可见性。该变量将由自动完成中的按钮处理。

主要组件：

<v-autocomplete
...
>
  <div slot="prepend-item">
     <v-btn text block @click="dialog = true">{{"Add Item"}}</v-btn>
  </div>
</v-autocomplete>

<add-item v-model="dialog"/>    <!-- Pass the dialog variable to the add-item component -->

export default {
  data: () => ({
    items: [...],
    dialog: false     // let's close the dialog initially.
  })
}

添加项目组件：

<v-dialog persistent :value="value" width="500">
  <v-card>
    ...
    <!-- To close the dialog, we'll need to use $emit() to
         let our parent know that the value had changed.  -->
    <v-btn @click="$emit('input', false)">Close Dialog</v-btn>  
  </v-card>
</v-dialog>

export default {
  props: ["value"],   // Pass the value of the dialog from the main component
};

请注意，当我们想要关闭对话框时，我们使用了$emit()。我们需要使用它，因为控制对话框的变量来自主组件，而从add-item 更改值的最佳方法是发出一个值。更多解释here.

这是demo。

【讨论】：