Vue.js 向属性添加v-bind时，v-dialog的v-btn消失

使用Vuetify，我创建了一个对话框，希望在其中绑定不同

v-text-field

的占位符

<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" persistent max-width="600px">
      <template v-slot:activator="{ on }">
        <v-btn text icon dark v-on="on" color="black">
          <v-icon>mdi-pencil-outline</v-icon>
        </v-btn>
      </template>
      <v-card>
        <v-card-title>
          <span class="headline">Edit profile</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12" sm="6" md="4">
                <v-text-field v-model="f_name" :label="getName()" required></v-text-field>
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
      </v-card>
    </v-dialog>
  </v-row>
</template>

<script>
  export default {
      name: "edit_form_personal",
      data() {
          return {
            dialog: false,
            f_name: '',
            l_name: '',
            email: '',
            phone: ''
          }
      },
      methods: {
          getName() {
            return 'joe'
          }
      },
  }
</script>

铅笔轮廓
编辑配置文件
导出默认值{
名称：“编辑个人表格”，
数据（）{
返回{
对话：错，
f_名称：“”，
l_名称：“”，
电子邮件：“”，
电话：''
}
},
方法：{
getName（）{
返回“乔”
}
},
}

我正在使用

getName（）

在表单中绑定'joe'。 问题是当我改变的时候

致：

---

会消失，就好像

v-dialog

被破坏一样。

将getName函数从方法移动到计算属性

请参见此处的工作代码笔：

导出默认值{
名称：“编辑个人表格”，
数据（）{
返回{
对话：错，
f_名称：“”，
l_名称：“”，
电子邮件：“”，
电话：''
}
},
计算：{
getName（）{
返回“乔”
}
},
}

还可以在文本字段中使用getName而不是getName（），并使用：label而不是：v-label

<v-text-field v-model="f_name" :label="getName" required></v-text-field>

谢谢，但这并没有解决问题，btn仍然没有。这是我可以看到的工作代码笔。这很奇怪什么是

v-label

？

v-

前缀表明这是一个自定义指令，但我找不到它存在的任何证据。您使用它的方式也意味着它不是一个指令。有一个

标签

道具和一个

标签

插槽。你是说其中一个吗？真的。我改了。My Bad那么您真正的代码使用的是

标签

，而不是

v-label

，并且仍然存在此问题？您在控制台中没有看到任何错误消息吗？

<v-text-field v-model="f_name" :label="getName" required></v-text-field>