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}}写在徽章而不是数字......

你能帮我解决这个问题吗？感谢＆＃39; S

Answer 1

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

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

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

VueJS将变量作为文本

1 个答案: