Vue.jsが動的にロードされた選択タグオプションを正しくレンダリングしない

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> 

そして、これは（setWalletsがで呼び出されたSignalRが財布の世話をして一緒に、Vueのアプリを作成するためのスクリプトですハブを正常にロードした後のハブ私のリポジトリからllets）：

<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マークアップ：

だから私はどこが間違っていますか？私は本当にシンプルな何かにこだわっているように感じます。

Answer 1

明らかに、Vueは1つのコンテキスト要素内にのみマウントできます。.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アプリケーションのそれぞれにウォレットの配列を渡す必要があります。

まあ、私には不十分だと思われますが、私は何か不足していると確信しています。お気軽に提案や修正を加えてください。

EDIT：は私が望んでいた結果を達成するための正しい方法は、順番に複数のコンポーネント間で同じデータを共有するために、単に店オブジェクトにすべてのデータを入れていた（例えば、それぞれのメニュー項目として財布）。

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

私は、次の3つのパラメータを持つHtml.HiddenFor @私はかみそりの構文解析できないことであるV-バインド属性、と私を助けるために書いた拡張メソッドであることを言及するのを忘れてしまいました。