CODEWITHSUNDEEP
vue.jsvue-directives
Yeasir Arafat Majumder
Yeasir Arafat Majumder

Reputation: 1264

Vue.js concatenate string in v-text

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.

Upvotes: 0

Views: 3397

Answers (2)

Emtiaz Zahid
Emtiaz Zahid

Reputation: 2835

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

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

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.

Upvotes: 2

Related Questions