时间戳

首页 > 解决方案 > 将 v-bind 添加到属性时 v-dialog 的 v-btn 消失

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>

我getName()用来在我的表单中绑定“joe”。问题是当我改变

<v-text-field v-model="f_name" label="First Name" required></v-text-field>

到 ：

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

<v-btn>消失，好像v-dialog被打破了。

标签： vue.jsvuetify.js

解决方案

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

在此处查看工作代码笔： https ://codepen.io/chansv/pen/xxxOJGq ?editors=1010

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

</script>

还在文本字段中使用 getName 代替 getName() 并使用 :label 代替 :v-label

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

推荐阅读