javascript - 在一页上加载多个 vue 实例后，其中一个实例不起作用

问题描述

我有两个在不同视图中工作的 Vue 实例。

var app = new Vue({
    el: '#app',
    data: {
        user: {
            name: ''
        },
    },
    mounted() {
        baseInstance.get('Account/GetUser')
            .then(response => {
                this.user = response.data;
            });
    },
})

var room = new Vue({
    el: '#room',
    data: {
        fields: ["room_no", "room_name"],
        items: [
            { room_no: 1, room_name: 'A' },
            { room_no: 2, room_name: 'B' }
        ],
    },
    mounted() {
        baseInstance.get('Room/ListData')
            .then(response => {
                this.items = response.data;
            });
    }
})

其中一个实例在登录后显示用户名的共享视图中工作。

文件夹结构是这样的。

WebAPP
├─ Controllers
├─ Models
└─ Views
     ├─ Home
     │   ├─ _ViewStart.cshtml
     │   └─ Index.cshtml
     ├─ Room 
     │   ├─ _ViewStart.cshtml
     │   └─ Index.cshtml
     └─ Shared
          └─ _Layout.cshtml

我生成了第一个 Vue 实例，WebApp/Views/Shared/_Layout.cshtml其中是在每个视图中共享的一般视图（带有菜单的导航栏）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]</title>
    <link rel="stylesheet" href="~/vendor/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="~/vendor/bootstrap-vue/dist/bootstrap-vue.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <script src="~/vendor/vue/dist/vue.js"></script>
    <script src="~/vendor/bootstrap-vue/dist/bootstrap-vue.min.js"></script>
    <script src="~/vendor/axios/dist/axios.js"></script>
    <script>
        const baseInstance = axios.create({
            baseURL: window.location.origin
        });
    </script>
    
</head>
<body>
    <div id="app">
        <div id="header">
            <b-navbar toggleable="lg" type="dark" variant="info">
                <b-navbar-brand href="#">Home</b-navbar-brand>
                <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
                <b-collapse id="nav-collapse" is-nav>
                    <b-navbar-nav>
                        <!-- my nav items -->
                    </b-navbar-nav>

                    <b-navbar-nav class="ml-auto">
                        <b-nav-item-dropdown right>
                            <template #button-content>
                                <em>{{ user.name }}</em>
                            </template>
                            <b-dropdown-item href="Account/Logout">Sign Out</b-dropdown-item>
                        </b-nav-item-dropdown>
                    </b-navbar-nav>
                </b-collapse>
            </b-navbar>
        </div>
        <div class="container">
            <main role="main" class="pb-3">
                @RenderBody()
            </main>
        </div>
    </div>

    @RenderSection("Scripts", required: false)
    
    @*the script to setting with Vue.js style*@
    <script>
var app = new Vue({
    el: '#app',
    data: {
        user: {
            name: ''
        },
    },
    mounted() {
        baseInstance.get('Account/GetUser')
            .then(response => {
                this.user = response.data;
            });
    },
})
   </script>
</body>
</html>

工作{{user.name}}很好。

但是当我加载房间视图时WebApp/Views/Room/index.cshtml。房间的 Vue 实例不起作用。

@page
@model WebApp.Views.Room.IndexModel
@{
}

<div id="room">
    <template>
        <div>
            <b-table :items="items" :fields="fields" caption-top>
            </b-table>
        </div>
    </template>
</div>



@* Ref script in @session to avoid error of script in body *@
@section scripts{
    <script>
var room = new Vue({
    el: '#room',
    data: {
        fields: ["room_no", "room_name"],
        items: [
            { room_no: 1, room_name: 'A' },
            { room_no: 2, room_name: 'B' }
        ],
    },
    mounted() {
        baseInstance.get('Room/ListData')
            .then(response => {
                this.items = response.data;
            });
    }
})
    </script>
}

this.items = response.data;我在这一行设置了断点。它确实得到了真实的数据。

但该表仅显示默认数据。

我做错了什么步骤？请告诉我。

标签： javascriptc#vue.jsasp.net-core-3.1

javascript - 在一页上加载多个 vue 实例后，其中一个实例不起作用

问题描述

解决方案

推荐阅读