时间戳

首页 > 解决方案 > V-Select 在一次选择中显示整个阵列

javascript - V-Select 在一次选择中显示整个阵列

问题描述

我创建了一个对象，该对象同时具有国家和这些国家的值，我希望在数组中显示每个国家及其对应对象的另一个数组中的值。问题是，显示数组中的所有值都在 v-select 的一个选择行上输出。

我已将两个数组放入一个对象并将项目设置为我的对象，然后将项目文本设置为国家数组，将项目值设置为国家对应的值数组。

getCountries() {
      let services = this.$store.state.services;
      let countries = {};
      let names = ['china','usa','malaysia','philippines','cambodia','myanmar','vietnam','indonesia','brazil','south_africa','united_kingdom','morocco','hong_kong','macau'];
      let prices = [];
      services.forEach(element => {
        if (element['service'] == this.selectedService) {
          names.forEach(country => {
            if (element[country] !== null) {
              prices.push(element[country]);
            }
          })
        }
      });

      countries.name = names;
      countries.price = prices;
      console.log(countries)

      return countries;

    },

<v-select
    v-model="selectedCountry"
    v-validate="'required'"
    :items="getCountries"
    item-text="name"
    item-value="price"
    label="Select Country"
    prepend-icon="filter_list"
    required
></v-select>

V-Select 应该是这样的：

china
usa
malaysia
...

但它显示为：

china,usa,malaysia

标签： javascriptvuetify.js

解决方案

我为自己想出了一个解决方案。使用我的数据将对象放入数组中变得容易多了。:)

    getCountries() {
  let services = this.$store.state.services;
  let names = ['china','usa','malaysia','philippines','cambodia','myanmar','vietnam','indonesia','brazil','south_africa','united_kingdom','morocco','hong_kong','macau'];
  let prices = [];
  let x = {};
  let y = []
  services.forEach(element => {
    if (element['service'] == this.selectedService) {
      names.forEach(country => {
        if (element[country] !== null) {
          x[country] = element[country];
          y.push({name: country, price: element[country]})

        }
      })
    }
  });
  console.log(y)
  return y;

},

推荐阅读