如何在 Vue.JS 中使用“v-for”過濾結果

Question

我正在使用使用 Bootstrap-Vue 構建的選項卡式界面。 單擊這些選項卡之一時，我使用v-for在顯示為網格的手風琴/下拉列表中呈現一些數據。

目前，我有一個選項卡顯示所有結果，在使用以下內容時可以正常工作（注意： practicesData就是我在使用 axios 調用后存儲 response.data 的位置）：

<div class="col-sm-12 col-md-6 col-lg-3 w-100 prize-dropdown-wrapper pb-5"
 v-for="(prize, name, index) in prizesData"
 :key="index"
>
<!--REMAINDER OF MARKUP GOES HERE-->
</div>

我的JSON結構看起來像這樣，除了我總共有 43 個結果。 每個對象中的每個值都會改變，但我想使用PrizeType1Name和PrizeType2Name來檢查它們是否包含字符串“ CTW ”、“ IW ”或“ OG ”：

{
  "1": [
      {
         "prizeTitle": "",
         "prizeImage": "",
         "prizeFirstLineText": "",
         "prizeType1": {
            "Image": "",
            "Line1": "",
            "Line2": ""
         },
         "prizeType2": {
            "Image": "",
            "Line1": "",
            "Line2": ""
         },
         "prizeTermsText": "",
         "prizeType1Name": "CTW",
         "prizeType2Name": ""
      }
   ],
  "2": [
      {
         "prizeTitle": "",
         "prizeImage": "",
         "prizeFirstLineText": "",
         "prizeType1": {
            "Image": "",
            "Line1": "",
            "Line2": ""
         },
         "prizeType2": {
            "Image": "",
            "Line1": "",
            "Line2": ""
         },
         "prizeTermsText": "",
         "prizeType1Name": "IW",
         "prizeType2Name": ""
      }
   ]
}

要訪問我正在使用的這些值之一：

this.prizesData[name][0].prizeType1或this.prizesData[name][0].prizeType2

我很難理解如何過濾我的結果。 例如，如果我單擊名為 ( CTW ) 的選項卡，我只想顯示 JSON 文件中包含“CTW”的結果。 或者，如果單擊名為“IW”的選項卡，則結果應針對包含“IW”的對象。

我嘗試過的：

添加了filteredPrizes以將過濾的獎品存儲為稍后訪問的對象

data() {
    return {
      prizesData: {},
      filteredPrizes: {},
    };
  }

我嘗試對從 JSON 文件收到的現有PrizesData對象使用filter() ，我在獲取 JSON 文件的相同方法中添加了它。

getPrizesInfo() {
      const self = this;
      //Get Error Validation JSON
      axios
        .get("/data/prizes.json")
        .then(response => (this.prizesData = response.data));

      this.filteredPrizes = this.prizesData.filter(prize =>
        this.prizesData[name][0].prizeType1.includes("CTW")
      );
    }

我的期望：我有 4 個標簽，第一個工作正常（顯示全部）。 其他 3 個需要僅顯示過濾結果，具體取決於PrizeType1Name或PrizeType2Name中是否存在“ CTW ”、“ IW ”或“ OG ”。

Answer 1

我不確定我是否理解正確，但您可以嘗試：

 new Vue({ el: '#app', data() { return { myData: { prizeTitle: '', prizeImage: '', prizeFirstLineText: '', prizeType1: { Image: 'CTW', Line1: 'CTW', Line2: 'CTW' }, prizeType2: { Image: 'IW', Line1: 'IW', Line2: 'IW' }, prizeTermsText: '', prizeType1Name: 'CTW', prizeType2Name: 'IW' }, prizesData: {} } }, methods: { filter (criteria) { // getting keyName with value equals to criteria const key = Object.keys(this.myData) .filter(key => this.myData[key] === criteria) .pop().replace('Name', '') this.prizesData = this.myData[key] } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> <div id="app"> <button @click="filter('CTW')">CTW</button> <button @click="filter('IW')">IW</button> <pre>{{ prizesData }}</pre> </div>

Answer 2

• 讓您的已filteredPrizes的獎品成為計算屬性
• 為您的標准創建一個對象數組（可能已重構該想法以滿足您的需求或更動態）

// Inside data
filterCriteria: [
  { name: 'prizeType1Name', value: 'CTW' },
  { name: 'prizeType2Name', value: 'CTW' }
];

• 創建一個函數來返回一個對象數組
  • 創建一個空數組將我們的選擇推入
  • 按鍵循環遍歷獎品對象
  • 在循環內，遍歷標准
  • 將選擇分配給數組，前提是它不存在
  • 返回數組

// Inside methods
getFilteredPrizes(prizes, criteria) {
  selected = [];

  Object.keys(prizes).forEach(a => {
    criteria.forEach(b => {
      if (prizes[a][0][b.name] === b.value && !selected.contains(prizes[a][0])) {
        selected.push(prizes[a][0]);
      }
    });
   });

   return selected;
}

 new Vue({ el: '#app', data() { return { prizesData: { "1": [ { "prizeTitle": "", "prizeImage": "", "prizeFirstLineText": "", "prizeType1": { "Image": "", "Line1": "", "Line2": "" }, "prizeType2": { "Image": "", "Line1": "", "Line2": "" }, "prizeTermsText": "", "prizeType1Name": "CTW", "prizeType2Name": "" } ], "2": [ { "prizeTitle": "", "prizeImage": "", "prizeFirstLineText": "", "prizeType1": { "Image": "", "Line1": "", "Line2": "" }, "prizeType2": { "Image": "", "Line1": "", "Line2": "" }, "prizeTermsText": "", "prizeType1Name": "IW", "prizeType2Name": "" } ] }, filterCriteria: [ { name: 'prizeType1Name', value: 'CTW' }, { name: 'prizeType2Name', value: 'CTW' } ] } }, computed: { filteredPrizes() { return this.getFilteredPrizes(this.prizesData, this.filterCriteria); } }, methods: { getFilteredPrizes(prizes, criteria) { selected = []; Object.keys(prizes).forEach(a => { criteria.forEach(b => { if (prizes[a][0][b.name] === b.value && !selected.includes(prizes[a][0])) { selected.push(prizes[a][0]); } }); }); return selected; } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> <div id="app"> <h3>Filtered Prizes</h3> <pre>{{ filteredPrizes }}</pre> </div>

Answer 3

正如@seantunwin 建議的那樣，我將我的 JSON 從對象更改為數組 - 需要進行一些整理和格式化，但從長遠來看讓生活更輕松。

所以我的新結構現在看起來像這樣：

[

{

"id": 1,

"prizeTitle": "",

"prizeImage": "",

"prizeFirstLineText": "",

"prizeType1": {

"Image": "",

"Line1": "",

"Line2": ""

},

"prizeType2": {

"Image": "",

"Line1": "",

"Line2": ""

},

"prizeTermsText": "",

"prizeType1Name": "CTW",

"prizeType2Name": ""

}

]

然后我使用了@Our_Benefactors 建議的計算屬性，如下所示：

computed: {

filteredPrizesByQuery: function() {

*return* this.prizes.filter(prize => {

*return* (

prize.prizeType1Name.match(this.query) ||

prize.prizeType2Name.match(this.query)

);

});

}

}

我包裝了我想使用 v-for 循環的代碼並引用了計算屬性：

<div

class="col-sm-12 col-md-6 col-lg-3 w-100 prize-dropdown-wrapper pb-5"

v-for="(prize, index) in filteredPrizesByQuery"

:key="index"

>

I set query as an empty string as default in data

data() {

*return* {

query: "",

prizes: [],

}

};

我在選項卡上添加了一個點擊事件來更改查詢值，類似於@christiancarrillo 的回答

<b-tab title="IW" @click="query='IW'">

所以現在當我單擊一個選項卡時，值會更改為 CTW、IW 或 OG，並且計算屬性會檢查這些值並返回與查詢匹配的結果。