Vue.js使用單獨的數組從對象構建視圖

Question

1. 更改html select並更新名為selected的變量。
2. 使用selected變量從hangOut對象檢索具有相同array 。
3. 更改列表以僅包含該數組中包含的兩個名稱（按此順序）。

因此，如果selected是“經常”，則列表將顯示棕眼的傑里和綠眼的傑恩。 這是代碼和小提琴：

的HTML

<div id="app">
  <select v-model="selected">
    <option v-for="(frequency,key) in selectOptions" :value="key">{{frequency}}</option>
  </select>
  <ul>
    <li v-for="(person,key) in persons" :key="key">
      {{ person.eyes + " eyed " + key }}
    </li>
    <p>These two like to hangout {{selected}}.</p>
  </ul>
</div> 

JS

var vm = new Vue({
  el: '#app',
  data: {
    selected: "sometimes",
    selectOptions: {
      sometimes: "Sometimes",
      often: "Often",
      rarely: "Rarely"
    },
    persons: {
      joe: {
        height: 'Tall',
        eyes: 'blue',
        age: 30
      },
      jane: {
        height: 'Medium',
        eyes: 'green',
        age: 22
      },
      jerry: {
        height: 'short',
        eyes: 'brown',
        age: 33
      }
    },
    hangOut: {
      sometimes: ["joe", "jane"],
      often: ["jerry", "jane"],
      rarely: ["jerry", "joe"]
    }
  },
  computed: {
    filter() {
      var result = {}; //create new emptly object to return
      arr = this.hangOut["activeSelect"];
      for (var i = 0, len = arr.length; i < len; i++) {
        result[i]=arr[i];
      }
      return result;
    }
  }
})

小提琴

https://jsfiddle.net/ty3ypmn0/5/

Answer 1

您必須將this.selected像this.hangOut[this.selected]一樣傳遞為以下代碼

computed: {
    filter() {
      var result = {}; //create new emptly object to return
      var arr = this.hangOut[this.selected];
      for (var i = 0, len = arr.length; i < len; i++) {
        result[i]=arr[i];
      }
      return result;
    }
  }

跟隨小提琴https://jsfiddle.net/ty3ypmn0/9/

您必須在模板{{filter}}訪問計算屬性，在js中，您可以像這樣this.filter

Answer 2

讓我們看一下jsFiddle ：

我已經重構了您的代碼，並制作了一個計算方法來處理選擇：

listObjects() {
  let keys = Object.keys(this.persons).filter(key => this.hangOut[this.selected].indexOf(key) >= 0);

  let finalPeople = {};
  for(let i = 0; i < keys.length; i++) {
    let key = keys[i];
    finalPeople[key] = this.persons[key];
  }
  return finalPeople;
},

讓我們看看代碼在說什么：

let keys = Object.keys(this.persons).filter(key => this.hangOut[this.selected].indexOf(key) >= 0);

該行在hangOut的數組中找到您提供的對象，我使用Object.keys來檢索人員（應該是人員：D）的鍵，然后將其過濾（ Array.prototype.filter MDN參考 ）以僅檢索選定的對象（看看this.hangOut [this.selected] .indexOf（key）...）

最后將項目添加到返回的對象並進行渲染。

Answer 3

我添加了另外兩個<p>來說明selectedInfos返回的內容。

首先，當您使用Vue中computed的屬性時，請考慮如果范圍內的另一個變量已更改（例如，當this.selected更改時，selectedInfos將返回新內容並進行更新）將自動更改的變量。

我將"activeSelected"更改為this.selected以正確跟蹤您選擇的內容。

 var vm = new Vue({ el: '#app', data: { selected: "sometimes", selectOptions: { sometimes: "Sometimes", often: "Often", rarely: "Rarely" }, persons: { joe: { height: 'Tall', eyes: 'blue', age: 30 }, jane: { height: 'Medium', eyes: 'green', age: 22 }, jerry: { height: 'short', eyes: 'brown', age: 33 } }, hangOut: { sometimes: ["joe", "jane"], often: ["jerry", "jane"], rarely: ["jerry", "joe"] } }, computed: { selectedInfos() { var result = []; //create new emptly object to return arr = this.hangOut[this.selected]; for (var i = 0; i < arr.length; i++) { result.push(this.persons[arr[i]]) } return result; } } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> <div id="app"> <select v-model="selected"> <option v-for="(frequency,key) in selectOptions" :value="key">{{frequency}}</option> </select> <ul> <li v-for="(person,key) in persons" :key="key"> {{ person.eyes + " eyed " + key }} </li> <p>These two like to hangout: {{hangOut[selected][0]}} and {{hangOut[selected][1]}} </p> <p>Infos: {{selectedInfos}} </p> <p>OneInfo: {{selectedInfos[0]}} </p> </ul> </div> 

Answer 4

像這樣 ？ 您只需要一個計算的過濾數組filteredPersons。 您可以看到它的輸入是人員，環聊和“已選擇”，因此，只要其中一項更改，都將重新計算filteredPersons。

標記

<div id="app">
  <select v-model="selected">
    <option v-for="(frequency,key) in selectOptions" :value="key">{{frequency}}</option>
  </select>
  <ul>
    <li v-for="(person,key) in persons">
      {{ person.eyes + " eyed " + person.name }}
    </li>
    <p>These two like to hangout {{selected}}.</p>
    {{filteredPersons}}
  </ul>
</div>

js

var vm = new Vue({
  el: '#app',
  data: {
    selected: "sometimes",
    selectOptions: {
      sometimes: "Sometimes",
      often: "Often",
      rarely: "Rarely"
    },
    persons: [
       {name: 'joe',
        height: 'Tall',
        eyes: 'blue',
        age: 30
      },
       {name: 'jane',
        height: 'Medium',
        eyes: 'green',
        age: 22
      },
       {name: 'jerry',
        height: 'short',
        eyes: 'brown',
        age: 33
      }
    ],
    hangOut: {
      sometimes: ["joe", "jane"],
      often: ["jerry", "jane"],
      rarely: ["jerry", "joe"]
    }
  },
  computed: {
    filteredPersons(){
      return this.persons.filter( pers => this.hangOut[this.selected].indexOf(pers.name) + 1);
    }
  }
})