Строка сцепления Vue.js в v-тексте

Question

Я пытаюсь объединить строку внутри директивы v-text. Простой пример:

<ul>
  <li v-for="obj in frameworks"> {{ obj.name }} has {{ obj.vite }} users
    <button v-on:click="removeFw(obj)" v-show="mode == 'edit'">Delete</button>
  </li>
</ul>

Это отлично работает. Теперь, вместо использования текстовой интерполяции, если я использую v-текст, как показано ниже, я все равно получаю текст, отображаемый, но Delete кнопки исчезают, независимо от значения mode имущество. Эти кнопки должны быть видны, если пользователь нажимает edit кнопка.

 <ul>
    <li v-for="obj in frameworks" v-text="`${obj.name} has ${obj.votes} users`">
     <button v-on:click="removeFw(obj)" v-show="mode == 'edit'">Delete</button>
    </li>
 </ul>

Вот скрипка: https://jsfiddle.net/30a6edvs/

Может кто-нибудь объяснить, пожалуйста, почему.

Answer 1

Использование v-text заменит внутренний текст /html элемента, и, таким образом, вы не сможете увидеть внутри него кнопку удаления. Так что вы должны сделать как ваш первый пример кода.

Answer 2

Это на самом деле изменение элементов и настройки текста.

Так что если вы хотите текст, а также кнопку, то ваш первый метод (Mustacheinterpolations) это путь

Если вам нужно обновить часть textContent, вы должны использовать {{Усы}} интерполяции.

подробности