Vue.js無法正確呈現動態加載的選擇標記選項

Question

我正在嘗試使用從Vue對象加載的選項來呈現選擇標簽，但是，正如您所看到的那樣，呈現這種方式似乎是錯誤的：

現在，這是select標簽的標記：

<div class="form-group ui-model">
    @Html.LabelFor(m => m.SenderWalletId, new { @class = "control-label col-sm-2" })
    <div class="col-sm-10">
        <select class="form-control" v-model="selectedSenderWallet">
            <option v-if="!walletsLoaded" disabled>Loading wallets...</option>
            <option v-if="walletsLoaded" v-for="wallet in wallets" v-bind:value="wallet.id">{{ wallet.description }}</option>
        </select>
        @Html.HiddenFor(m => m.SenderWalletId, new { }, new { value = "selectedSenderWallet" })
        @Html.ValidationMessageFor(m => m.SenderWalletId)
    </div>
</div>

這是用於創建Vue應用程序的腳本，以及SignalR負責錢包的創建（從我的存儲庫成功加載錢包后，集線器會調用setWallets）：

<script>
    var walletLinkText = Vue.extend({
        props: ['wallet'],
        template: '<span>{{ linkText }}</span>',
        computed: {
            linkText: function () {
                return this.wallet.description + ' (' + this.wallet.currentAmountFormatted + ')';
            }
        }
    });

    var uiModel = new Vue({
        el: '.ui-model',
        data: {
            wallets: [],
            walletsLoaded: false
        },
        components: {
            'wallet-link-text': walletLinkText
        }
    });

    $(function() {
        var walletsHubProxy = $.connection.walletsHub;

        walletsHubProxy.client.updateWallet = function (...) {
            ...
        };

        walletsHubProxy.client.setWallets = function (currentWallets) {
            uiModel.wallets = currentWallets;
            uiModel.walletsLoaded = true;
        };

        $.connection.hub.start().done(function() {
            walletsHubProxy.server.getWallets();
        });
    });
</script>

關鍵是，如菜單所示，我確定錢包已正確裝入：

這是上面的html標記：

<ul class="nav navbar-nav ui-model">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Wallets <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li v-if="!walletsLoaded"><a><i class="fa fa-spinner fa-pulse"></i> Loading...</a></li>
            <li v-if="walletsLoaded && !wallets.length"><a>No wallets.</a></li>
            <li v-if="walletsLoaded" v-for="wallet in wallets">
                <a v-bind:href="'@Url.Content(string.Format("~/Wallets/"))' + wallet.id">
                    <wallet-link-text :wallet="wallet"></wallet-link-text>
                </a>
            </li>
            <li role="separator" class="divider"></li>
            <li><a href="@Url.Action("Add", "Wallets")"><i class="fa fa-fw fa-edit"></i> Add new</a></li>
        </ul>
    </li>
</ul>

那我在哪里錯了？ 我覺得自己只停留在一些非常簡單的事情上。

Answer 1

顯然，Vue只能安裝在一個上下文元素中：.ui-model引用DOM中的多個元素，因此只有第一個元素正確呈現（菜單）。 如果我創建另一個Vue應用，則代碼將按預期工作：

<div class="form-group" id="wallets-app">
    @Html.LabelFor(m => m.WalletId, new { @class = "control-label col-sm-2" })
    <div class="col-sm-10">
        <select class="form-control" v-model="selectedWallet">
            <option v-if="!walletsLoaded" disabled>Loading wallets...</option>
            <option v-else v-for="wallet in wallets" v-bind:value="wallet.id">{{ wallet.description }}</option>
        </select>
        @Html.HiddenFor(m => m.WalletId, new { }, new { value = "selectedWallet" })
        @Html.ValidationMessageFor(m => m.WalletId)
    </div>
</div>

<script>
    var app = new Vue({
        el: '#wallets-app',
        data: {
            wallets: [],
            walletsLoaded: false,
            selectedWallet: ''
        }
    });

    //SignalR code to sync hubs and ui
</script>

我希望在多個元素之間共享一個數據數組，以便每個元素都有自己的html表示形式，其視圖。 相反，我必須將錢包陣列傳遞給每個我想對更新做出反應的Vue應用程序。

好吧，這對我來說似乎效率不高，但是我確定我錯過了一些東西。 隨時添加任何建議和/或更正。

編輯：達到我想要的結果的正確方法是簡單地將所有數據放入存儲對象，以便在多個組件（例如每個錢包的菜單項）之間共享相同的數據。

<div class="form-group" id="select-wallet">
    @Html.LabelFor(m => m.WalletId, new { @class = "control-label col-sm-2" })
    <div class="col-sm-10">
        <select class="form-control" v-model="selectedWallet">
            <option v-if="!sharedData.walletsLoaded" disabled>Loading wallets...</option>
            <option is="wallet-select-option" v-else v-for="wallet in sharedData.wallets" v-bind:wallet="wallet"></option>
        </select>
        @Html.HiddenFor(m => m.WalletId, new { }, new { value = "selectedWallet" })
        @Html.ValidationMessageFor(m => m.WalletId)
    </div>
</div>

<script>
    var store = {
        data: {
            wallets: [],
            walletsLoaded: false
        }
    };

    Vue.component('wallet-select-option', {
        props: ['wallet'],
        template: '<option v-bind:value="wallet.id">{{ wallet.description }}</option>'
    });

    var selectWallet = new Vue({
        el: '#select-wallet',
        data: {
            sharedData: store.data,
            selectedWallet: ''
        }
    });


    $(function () {
        var walletsHubProxy = $.connection.walletsHub;

        walletsHubProxy.client.updateWallet = function (...) {
            ...
        };

        walletsHubProxy.client.setWallets = function (currentWallets) {
            store.data.wallets = currentWallets;
            store.data.walletsLoaded = true;
        };

        $.connection.hub.start().done(function () {
            walletsHubProxy.server.getWallets();
        });
    });
</script>

我忘了提到帶有三個參數的@ Html.HiddenFor是我為幫助我處理v-bind屬性而編寫的擴展方法，而razor語法無法解析這些屬性。