Блог

Я использую компонент кнопки и всплывающей подсказки в моем проекте vuetify. Я хочу отображать всплывающую подсказку только тогда, когда кнопка отключена, и я ищу решение, как я могу сделать это правильно.

На данный момент всплывающая подсказка видна только тогда, когда кнопка включена.

Мой код:

 <v-tooltip top>
<template v-slot:activator="{ on, attrs }">
<v-btn class="ma-2" color="primary" :disabled="disabled" v-bind="attrs" @click="clear" v-on="on">
Save
</v-btn>
 </template>
<span>its my toolip</span>
</v-tooltip>
  

Не уверен, что есть лучший ответ, но вы можете использовать v-if и v-else . Кроме того, если вы хотите показать всплывающую подсказку для отключенной кнопки, вы должны обернуть кнопку пустым div . Попробуйте ниже.

   <v-tooltip v-if="disabled" top>
    <template v-slot:activator="{ on, attrs }">
      <div v-on="on">
        <v-btn class="ma-2" color="primary" disabled v-bind="attrs" @click="clear">
          Save
        </v-btn>
      </div>
    </template>
    <span>its my toolip</span>
  </v-tooltip>
  <v-btn v-else class="ma-2" color="primary" v-bind="attrs" @click="clear">
    Save
  </v-btn>
  

             <v-tooltip top>
              <template v-slot:activator="{ on, attrs }">
                <div v-on="disabled ? on : ''">
                  <v-btn class="ma-2" color="primary" :disabled="disabled" v-bind="attrs">
                    Save
                  </v-btn>
                </div>
              </template>
              <span>its my tooltip</span>
            </v-tooltip>
  

Или это, так что вам не нужны две кнопки. Единственное заметное отличие — строка 3.

Прошло некоторое время, но надеюсь, это поможет. Дайте мне знать, если это покажется странным! 🙂