Question

更改html select，然后更新名为selected的变量。
使用selected变量从array对象中检索hangOut相同的内容。
更改列表以仅包含该数组中包含的两个名称（按此顺序）。

所以如果selected是＆＃34;经常＆＃34;比名单显示棕色眼睛的杰里和绿眼睛的简。这是代码和小提琴：

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）然后我已经过滤了（{{3它们只检索选定的对象（看看this.hangOut [this.selected] .indexOf（key）...）

最后将项目添加到返回的对象并进行渲染。

Answer 3

我添加了另外两个<p>来说明selectedInfos正在返回的内容。

首先，当您在Vue中使用属性computed时，如果您的范围内的另一个变量发生了变化（例如，当此选择更改时，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

<强> Like this ? 您只需要一个计算过滤的数组，filteredPersons。您可以看到它的输入是人，hangOut和＆＃39;选择＆＃39;，因此，只要其中一个更改，就会重新计算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);
    }
  }
})

Vue.js使用单独的数组从对象构建视图

4 个答案: