Question

如何通过复选框有条件地更改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>

Answer 1

您只需要将值绑定到可以更改的工具提示文本，例如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>

如何有条件地更改Bootstrap-vue工具提示文本？

1 个答案: