Строка сцепления 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

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

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

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

Подробности

Answer 2

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