Vue.js concatenate string in v-text

Question

I am trying to concatenate string inside v-text directive. Simple example:

<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>

This works fine. Now, instead of using the text interpolation if i use v-text like below, i still get the text showing up, but the Delete buttons disappear, regardless of the value of the mode property. These buttons should be visible if user clicks the edit button.

 <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>

Here is the fiddle: https://jsfiddle.net/30a6edvs/

Can anyone please explain why.

Answer 1

Using v-text will replace inner text/html of the element and thus you cannot see the delete button inside that. So you have to do as your first example code.

Answer 2

Its actually changing the elements and setting the text.

So if you want the text and also button then your first method (Mustache interpolations) is the way

If you need to update the part of textContent, you should use {{ Mustache }} interpolations.

Details