V-for uses the index index to display as the total number of data items

problem description

I want to use the last item of v-for "s index index as the number of data items queried on the entire page

the environmental background of the problems and what methods you have tried

index is always unfetched and doesn"t know how to get the last dynamic

.

clipboard.png how to achieve an effect like this

related codes

             methods: {
                Get_YJweather: function() {
                var _this = this;
                var a = document.getElementById("beginTime").value;
                var b = document.getElementById("overTime").value;
                mui.ajax("http://aaaaaa,method=Get_YJweather", {
                    data: {
                        timefrom: a,
                        timeto: b
                    },
                    dataType: "json", //json
                    type: "post", //HTTP
                    timeout: 50000, //10;
                    success: function(res) {
                        _this.weatherwaring = JSON.parse(res);
                        console.log("" + res);
                    },
                    error: function(xhr, type, errorThrown) {
                        console.log("");
                    }
                });
              },
            } 
            
            
            
            <div  class="mui-control-content mui-active">
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3">
                    <div class="mui-input-row">
                        <input id="beginTime" ref="time-from" type="text" class="mui-input-clear" placeholder="" data-options="{"type":"date"}">
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3">
                    <div class="mui-input-row">
                        <input id="overTime" ref="time-toto" type="text" class="mui-input-clear" placeholder="" data-options="{"type":"date"}">
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3">
                    <div class="mui-input-row">
                        <button @click="Get_YJweather()" type="button" class="mui-btn mui-btn-blue mui-btn-block" style="border: 1px solid -sharp5f9ae1;background-color: -sharp5f9ae1;"></button>
                    </div>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-2 mui-col-sm-3" v-for="(w,index) in weatherwaring">
                    <div class="mui-input-row">
                    {{getIndex()}}
                    </div>
                </li>
            </ul>
            <ul class="mui-table-view mui-table-view-chevron" style="background: rgba(255, 255, 255, 0.6);" v-for="(w,index) in weatherwaring">
                <li class="mui-table-view-cell mui-collapse">
                    <a class="mui-navigate-right">
                        <img class="mui-media-object mui-pull-left" src="../img/icon/fb.png">
                        <div class="mui-media-body mui-ellipsis">
                            {{w.ALARMNAME}}
                            <p class="mui-ellipsis">{{w.PUBLISHTIME}}

</div> </a> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <span>: <p style="color: -sharp007aff;">{{w.CONTENT}}

</span> </li> </ul> </li> </ul> </div>

what result do you expect? What is the error message actually seen?

can you give me an example or method that rookies don"t understand before using VUE

?
Jan.13,2022

. Isn't your total number of entries length to circulate data

?
Menu