Question

我正在尝试使用从Vue对象加载的选项来呈现一个select标记，但是，正如您通过渲染方式所看到的那样，它看起来像是错误的：

现在这是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应用程序。

嗯，对我来说似乎没有效率，但我确定我错过了一些东西。随意添加任何建议和/或更正。

编辑：实现我想要的结果的正确方法是简单地将所有数据放入 store 对象，以便在多个组件之间共享相同的数据（例如每个钱包的菜单项。）

<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属性，这些属性是剃刀语法无法解析的。

Vue.js无法正确呈现动态加载的选择标记选项

1 个答案: