Как изменить связывание пользовательской директивы Vue.value

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, так как без этого, вероятно, будут утечки.