自动完成对话框-vuetify

Question

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

<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>组件置于自动完成之外，并且工作正常。

如何解决？

Answer 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。