将文本字段的值与 Vuetify 中的工具提示内容同步答案

【问题标题】：Synchronize the value of the text field with tooltip content in Vuetify将文本字段的值与 Vuetify 中的工具提示内容同步
【发布时间】：2020-11-18 15:10:02
【问题描述】：

<v-col class="d-flex align-center">
   <v-tooltip bottom>
      <template v-slot:activator="{ on }">
         <v-text-field
            v-on="on"
            :value="info.payeeNo"
            dense
            label="Another payer"/>
      </template>
      <span>{{info.payeeNo}}</span>
   </v-tooltip>
</v-col>

我希望工具提示与文本字段的值相同。我已经尝试使用此代码和 this.info.payeeNo 但它都显示一个空白字段。

【问题讨论】：

标签： html vue.js vuejs2 vuetify.js

【解决方案1】：

您应该使用v-model 而不是:value 进行双向绑定：

<v-col class="d-flex align-center">
   <v-tooltip bottom>
      <template v-slot:activator="{ on }">
         <v-text-field
            v-on="on"
            v-model="info.payeeNo"
            dense
            label="Another payer"/>
      </template>
      <span>{{info.payeeNo}}</span>
   </v-tooltip>
</v-col>

LIVE DEMO

【讨论】：