VueJS get variable as text

Question

I'm working on a Laravel project and i use VueJS for notifications system. However, i'm a real noob in VueJS dev'. Consequently, i don't know how to print a variable as text.

Situation : System of notifications work and i would like to print the number of notifications in a bootsrap badge. So, i did this :

<i class="fa fa-bell-o" aria-hidden="true"></i>  Notifications <span id='badge' class="badge badge-info">{{notifications.length}}</span> <span class="caret"></span>

With this code in my Notification.vue file :

    <template>
    <li class="nav-item dropdown">
        <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
            <i class="fa fa-bell-o" aria-hidden="true"></i>  Notifications <span id='badge' class="badge badge-info">{{notifications.length}}</span> <span class="caret"></span>
         </a>

         <ul class="dropdown-menu" role="menu">
            <li style="text-align:center" v-for="notification in notifications">
                <a href="#" v-on:click="MarkAsRead(notification)">
                    {{notification.data.idea.name}} a été validée !<br>
                 </a>
            </li>
             <li style="text-align: center" v-if="notifications.length==0">
              Aucune notification !
             </li>
         </ul>
     </li>
</template>

<script>

    export default {
        props: ['notifications'],
        methods: {
            MarkAsRead: function (notification) {
                var data = {
                    id: notification.id
                };
                axios.post('/notification/read', data).then(response => {
                    window.location.href = "/manif/";
                });
            }
        }
    }
</script>

Finally i only see {{notifications.length}} write in the badge instead of a number...

Can you help me about this ? Thank's

tony19 · Accepted Answer · 2022-07-15 22:17:28Z

3

The raw mustache tags are shown because you've used v-pre directive in the parent element, which tells Vue to not compile the element and its children:

<a id="navbarDropdown" ... v-pre> <!-- Don't use v-pre here -->
  ...
  <span ...>{{notifications.length}}</span>
</a>

Simply removing that directive should resolve the issue: demo

edited Jul 15, 2022 at 22:17

answered Apr 15, 2018 at 13:57

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS get variable as text

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related