Question

使用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被破坏了。

Answer 1

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

将v-bind添加到属性时，v-dialog的v-btn消失

1 个答案: