v-model不支持动态单选按钮，vue js

Question

var vue = new Vue({
               el: '#app',

               data: function (){
                   return {
                       categories: null,
                       foodItems: null,
                       selectedCategoryId: null
                   }
                },
                mounted: function() {
                    axios
                        .get('@Url.Action("GetCategories", "Home", new { area="Canteen" })')
                        .then(response => (this.categories = response.data))
               }
            });

                <span>selected: {{ selectedCategoryId }}</span>

                <div class="box box-default">
                    <div class="box-header with-border">
                        <div class="text-center text-uppercase"><b>Select</b></div>
                    </div>
                    <div class="box-body">
                        <div class="btn-group-vertical btn-block btn-group-toggle" data-toggle="buttons">

                            <label v-for="(category, index) in categories" class="btn btn-default active">
                                <input :id="'option-' + category.id" :value="category.id" type="radio" name="categories" autocomplete="off" v-model="selectedCategoryId" />{{ category.name }}
                            </label>

                        </div>

                    </div>

                </div>

Answer 1

这是工作示例

var vue = new Vue({
               el: '#app',

               data: function (){
                   return {
                       categories: null,
                       foodItems: null,
                       selectedCategoryId: null,
                       isdata:false
                   }
                },
                mounted: function() {
                  console.log("mounted");
                  var vm = this;
                  setTimeout(function(){ 
                    vm.categories = [
                      {id:1,name:'test1'},
                      {id:2,name:'test2'},
                      {id:3,name:'test3'}
                    ];
                    vm.isdata = true;
                  }, 2000);
                  
                }
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<span>selected: {{ selectedCategoryId }}</span>

                <div class="box box-default">
                    <div class="box-header with-border">
                        <div v-show="!isdata">Loading....</div>
                        <div v-show="isdata" class="text-center text-uppercase"><b>Select</b></div>
                    </div>
                    <div class="box-body">
                        <div class="btn-group-vertical btn-block btn-group-toggle" data-toggle="buttons">

                            <label v-for="(category, index) in categories" class="btn btn-default active">
                                <input :id="'option-' + category.id" :value="category.id" type="radio" name="categories" autocomplete="off" v-model="selectedCategoryId" />{{ category.name }}
                            </label>

                        </div>

                    </div>

                </div>
</div>