Question

我在Vue项目中有一个数据元素（stateData），我想对该数据元素进行切片并将其分配给另一个数据元素。例如，我希望将stateData从“ 1999-00”切成“ 2008-09”，并将其分配给newStateData数组，但条件是stateData数组不应对其进行任何更改。

您能建议一些Vue方法吗？

var app = new Vue({
  el: "#app",
  data(){
    return {
    stateData:[ { "State": "Andhra Pradesh", "Id": "1", 
                  "1999-00": "125236",
                  "2000-01": "140119",
                  "2001-02": "151482",
                  "2002-03": "163385",
                  "2003-04": "184463",
                  "2004-05": "202575",
                  "2005-06": "239683",
                  "2006-07": "277286",
                  "2007-08": "326547",
                  "2008-09": "377346",
                  "2009-10": "411349",
                  "2010-11": "319864"},
                { "State": "Arunachal Pradesh", "Id": "2",
                  "1999-00": "1630",
                  "2000-01": "1783",
                  "2001-02": "1941",
                  "2002-03": "2122",
                  "2003-04": "2424",
                  "2004-05": "2556",
                  "2005-06": "2918",
                  "2006-07": "3413",
                  "2007-08": "3888",
                  "2008-09": "4536",
                  "2009-10": "7474",
                  "2010-11": "9021"}],
    newStateData:[]
             }
     }
 })

Answer 1

您可以创建一个类似于filterData的函数来遍历每个状态对象中的条目并过滤掉不需要的日期。

我们可以在data（）函数中调用filterData来提取正确的值。

                 
var app = new Vue({
    el: "#app",
    methods: {
        isDate(key) {
            return /\d{4}\-\d{2}/.test(key);
        },
        filterData(stateData, startDate, endDate) {
            return stateData.map(state => { 
                let entries = Object.entries(state).filter(([key, val]) => this.isDate(key) && (key >= startDate && key <= endDate ))
                return Object.fromEntries(entries);
            });
        },

        getData() {
            return {
                stateData: this.stateData,
                newStateData: this.filterData(this.stateData, this.startTime, this.endTime)
            }
        },
        // Get the maximum for a given state data
        getMax(stateData) {
            let values = Object.values(stateData);
            return [...values.sort((a,b)=>a-b)].pop();
        }
    },
    data: { 
        startTime: "1999-00",
        endTime: "2008-09",
        stateData: [ { "State": "Andhra Pradesh", "Id": "1", 
                  "1999-00": "125236",
                  "2000-01": "140119",
                  "2001-02": "151482",
                  "2002-03": "163385",
                  "2003-04": "184463",
                  "2004-05": "202575",
                  "2005-06": "239683",
                  "2006-07": "277286",
                  "2007-08": "326547",
                  "2008-09": "377346",
                  "2009-10": "411349",
                  "2010-11": "319864"},
                { "State": "Arunachal Pradesh", "Id": "2",
                  "1999-00": "1630",
                  "2000-01": "1783",
                  "2001-02": "1941",
                  "2002-03": "2122",
                  "2003-04": "2424",
                  "2004-05": "2556",
                  "2005-06": "2918",
                  "2006-07": "3413",
                  "2007-08": "3888",
                  "2008-09": "4536",
                  "2009-10": "7474",
                  "2010-11": "9021"}]
    }
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<form class="form-inline">
<div id="app" class="p-2 container">
<div class="form-group  mb-4">
<label class="mr-2">Start  </label>
<select class="form-control" v-model="startTime">
    <option value="1999-00" >1999-00</option>
    <option value="2000-01" >2000-01</option>
    <option value="2001-02" >2001-02</option>
    <option value="2002-03" >2002-03</option>
    <option value="2003-04" >2003-04</option>
    <option value="2004-05" >2004-05</option>
    <option value="2005-06" >2005-06</option>
    <option value="2006-07" >2006-07</option>
    <option value="2007-08" >2007-08</option>
    <option value="2008-09" >2008-09</option>
    <option value="2009-10" >2009-10</option>
    <option value="2010-11" >2010-11</option>
</select>
</div>
<div class="form-group mb-4">
<label class="mr-2" for="endDate">End&nbsp;</label>
<select id="endDate" class="form-control" v-model="endTime" >
    <option value="1999-00" >1999-00</option>
    <option value="2000-01" >2000-01</option>
    <option value="2001-02" >2001-02</option>
    <option value="2002-03" >2002-03</option>
    <option value="2003-04" >2003-04</option>
    <option value="2004-05" >2004-05</option>
    <option value="2005-06" >2005-06</option>
    <option value="2006-07" >2006-07</option>
    <option value="2007-08" >2007-08</option>
    <option value="2008-09" >2008-09</option>
    <option value="2009-10" >2009-10</option>
    <option value="2010-11" >2010-11</option>
</select>
</div>
<div id="app">
  <div>
    <p>Max Values (new State Data):<p>
    <li class="ml-4"v-for="stateData in getData().newStateData" :key="stateData">
       {{ getMax(stateData)  }}
    </li>
  </div>
  <p>new State Data:<p>
  <p>{{getData().newStateData}}</p>
</div>
</div>
</form>

如何在JavaScript中的数组内切片字典？

1 个答案: