Question

我正在使用v-for循环，并将Vue.directive用于引导程序工具提示，该工具提示将绑定值设置为我从方法返回的字符串。拥有新数据后，如何更改此绑定值？即使我从方法中返回了新数据，它也不会更新。

我试图制作一个数据变量，并在我的方法中进行设置，并在指令中使用该变量，但它仍然没有改变。

Vue.directive('tooltip',
        function(el, binding) {
            $(el).tooltip({
                title: binding.value,
                placement: binding.arg,
                trigger: 'hover'
            });
        });


<li v-for="(display_name, index) in displayNameList" class="nav-item">
    <a v-tooltip:bottom="tabTooltipSet(index)" {{ display_name }}</a>
</li>

我希望binding.value可以更改为函数在调用时返回的值，这是它最初执行的操作。但是在设置了该值并且我的displayNameList可以完全更改之后，它不会相应地更新。因此，如果我的第一个标签设置为DOG，然后更改列表并将其设置为CAT，则工具提示应为CAT而不是DOG。

Answer 1

Vue指令似乎正常工作。问题是在同一元素上两次调用tooltip()不会更新工具提示。在我的示例中，我刚刚销毁了先前的工具提示，并添加了一个新的提示。可能没有那么繁琐的方法可以做到这一点，但这似乎是实现预期结果的最简单方法。

Vue.directive('tooltip', function(el, binding) {
  if (binding.value === binding.oldValue) {
    return
  }

  $(el).tooltip('dispose')

  $(el).tooltip({
    title: binding.value,
    placement: binding.arg,
    trigger: 'hover'
  });
});

new Vue({
  el: '#app',
  
  data () {
    return {
      displayNameList: ['Red', 'Green', 'Blue'],
      tooltipNumber: 0
    }
  },
  
  methods: {
    onClick () {
      this.tooltipNumber++
    },

    tabTooltipSet (index) {
      return this.displayNameList[index] + ' tooltip ' + this.tooltipNumber
    }
  }
})

.nav-item {
  background: #ccc;
  border: 1px solid #000;
  list-style: none;
  margin: 10px auto;
  width: 100px;
}

.nav-item a {
  display: block;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="(display_name, index) in displayNameList" class="nav-item">
      <a v-tooltip:bottom="tabTooltipSet(index)">{{ display_name }}</a>
    </li>
  </ul>
  <button @click="onClick">Update tooltips</button>
</div>

我已经检查了值是否已更改，以避免不必要地创建/销毁工具提示。一个更强大的版本将需要检查放置位置是否也已更改。您还应该使用指令的unbind钩子来正确销毁工具提示，因为如果没有该钩子，很可能会泄漏。

如何更改自定义Vue指令的binding.value

1 个答案: