Как можно условно изменить текст всплывающей подсказки Bootstrap - vue? - PullRequest
Новая
       51

Как можно условно изменить текст всплывающей подсказки Bootstrap - vue?

0 голосов
/ 01 мая 2020

Как можно условно изменить текст всплывающей подсказки Bootstrap - vue с помощью флажка? Как получить доступ к тексту всплывающей подсказки, чтобы изменить его? Любая помощь будет принята с благодарностью.

Vue компонент, где флажок пытается изменить всплывающую подсказку: 

<template>
  <div class="text-center">
    <b-button v-b-tooltip.hover.right="tooltipText" variant="outline-primary">
      <div v-bind:class="{ active: checkbox1 }">
        {{ username }}
      </div>
    </b-button>  
  </div>
</template>

<script>

export default {
    props: ['username', 'checkbox1'],

    data() {
      return {
         show: true,
         tooltipTextContent: 'hello tooltip',
     }      
},

methods: {

     tooltipText() {
          if (!this.checkbox1) {
            return this.tooltipTextContent
          } else {
            return `${this.tooltipTextContent} changed`
          }
    }
},
} 

</script>
<style scoped>

.active {
    color: red;
}
</style>

1 Ответ

1 голос
/ 01 мая 2020

Вам просто нужно привязать значение к тексту всплывающей подсказки, которое можно изменить, например computed: 

new Vue({
  el: "#app",
  data: {
    username: 'Username1',
    checkbox1: false,
    tooltipTextContent: 'block'
  },
  computed: {
    tooltipText() {
      if (!this.checkbox1) {
        return this.tooltipTextContent
      } else {
        return `${this.tooltipTextContent} changed`
      }
    }
  }
})
.active {
  color: red;
}
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!-- Load the following for BootstrapVueIcons support -->
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <div class="text-center">
    <b-button v-b-tooltip.hover.right="tooltipText" variant="outline-primary">
      <div v-bind:class="{ active: checkbox1 }">
        {{ username }}
      </div>
    </b-button>
  </div>
  <b-form-checkbox id="checkbox-1" v-model="checkbox1" name="checkbox-1">
    Change tooltip text?
  </b-form-checkbox>
</div>
...