VueJS 将变量作为文本获取

Question

我正在开发一个 Laravel 项目，我使用 VueJS 作为通知系统。 但是，我是 VueJS 开发人员的真正菜鸟。 因此，我不知道如何将变量打印为文本。

情况：通知系统工作，我想在引导徽章中打印通知数量。 所以，我这样做了：

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

在我的 Notification.vue 文件中使用此代码：

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

最后我只看到 {{notifications.length}} 写在徽章而不是数字...

你能帮我解决这个问题吗？ 谢谢

Answer 1

显示原始 mustache 标记是因为您在父元素中使用了v-pre指令，它告诉 Vue 不编译该元素及其子元素：

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

只需删除该指令即可解决问题： demo