twitter-bootstrap - 如何 v-for Bootstrap vue 工具提示

Question

我有一些 Bootstrap Vue 工具提示，我想通过使用 v-for 来查看对象数组并填充 <b-tooltip> 的值来减少标记中的占用空间。特性。

我当前的工具提示之一

<b-tooltip v-if="clientInContext && taxId && hideTaxId"
  target="titlebar-taxId-eye-show"
  :disabled.sync="disableTaxIdButtonTooltip"
  :show.sync="showTaxIdButtonTooltip"
  triggers="hover"
  placement="bottom">
    Click to temporarily display this value
</b-tooltip>

我的 V-For 尝试:

<b-tooltip v-for='tooltip in tooltipContents'
  v-if="tooltip.vif"
  target="tooltip.target"
  :disabled.sync="tooltip.disable"
  :show.sync="tooltip.show"
  triggers="hover"
  placement="bottom">
    {{tooltip.text}}
</b-tooltip>

public tooltipContents: object[] = [
  {
    vif: 'clientInContext && ssn && hideSsn',
    target: 'titlebar-ssn-eye-show',
    disable: this.disableSsnButtonTooltip,
    show: this.showSsnButtonTooltip,
    text: 'Click to temporarily display this value'
  },
  {
    vif: 'clientInContext && ssn && !hideSsn',
    target: 'titlebar-ssn-eye-hide',
    disable: this.disableSsnButtonTooltip,
    show: this.showSsnButtonTooltip,
    text: 'Click to mask this value'
  },
  {
    vif: 'clientInContext && ssn && !hideSsn',
    target: 'titlebar-ssn',
    disable: this.disableSsnTextTooltip,
    show: this.showSsnTextTooltip,
    text: '{{ssn}}' 
  }
]

我不确定我还能做些什么来让它发挥作用。并且还没有在网上找到与此问题相关的任何内容。

Answer 1

我会将 v-for 放在 div 中，并将 v-if 放在 v-tooltip..这不是与您的示例的“一对一”比较，但它显示了如何对每个工具提示执行检查..

CodePen 镜像:https://codepen.io/oze4/pen/gyxrBY?editors=1010

new Vue({
  el: "#app",
  data: {
    tooltips: [{
        name: "tooltip1",
        target: "button-1",
        placement: "bottom",
        text: "Live"
      },
      {
        name: "tooltip2",
        target: "button-2",
        placement: "top",
        text: "Html"
      },
      {
        name: "tooltip3",
        target: "button-3",
        placement: "left",
        text: "Alternative"
      }
    ]
  },
  methods: {
    tooltipCheck(tooltip) {
      switch (tooltip) {
        case "tooltip1":
          {
            // do check for tooltip 1
            return true;
          }
        case "tooltip2":
          {
            // do check fo tooltip2
            return false;
          }
        case "tooltip3":
          {
            // do check for tooltip3
            return true;
          }
      }
    }
  }
});

<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>

<link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet" />


<div id="app">
  <div style="margin-top: 40px;">
    <b-container fluid>
      <b-row style="margin-top: 10px;">
        <b-button id="button-1" variant="outline-success">One (check evaluates to true)</b-button>
      </b-row>
      <b-row style="margin-top: 10px;">
        <b-button id="button-2" variant="outline-success">Two (check evaluates to false)</b-button>
      </b-row>
      <b-row style="margin-top: 10px;">
        <b-button id="button-3" variant="outline-success">Three (check evaluates to true)</b-button>
      </b-row>
      <div v-for="(tt, index) in tooltips">
        <b-tooltip v-if="tooltipCheck(tt.name)" :target="tt.target" :placement="tt.placement">
          {{ tt.text }}
        </b-tooltip>
      </div>
    </b-container>
  </div>
</div>