Vue.js 自动完成内的对话框-vuetify

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

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

组件的代码

{{{（“添加项”）}

现在，对话框按钮实际上显示在autocomplete中，但问题是，只要单击鼠标，对话框就会自动打开

我注意到这与autocomplete组件有某种联系，我尝试将

组件放在autocomplete之外，它工作得很好

---

如何解决这个问题？

而不是把整个

。我们将声明一个变量
对话框
，它将控制
添加项
对话框的可见性。该变量将由自动完成中的按钮处理

主要组件：


{{“添加项”}
当我们想要关闭对话框时。我们需要使用它，因为控制对话框的变量来自主组件，而从
additem
更改值的最佳方法是发出一个值。更多的解释


这是一本书

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