Question

我创建了一个既包含国家又包含这些国家/地区值的对象，我希望显示该数组中的每个国家/地区以及该对象中来自另一个数组的相应值。问题是，显示数组中的所有值都将在v-select的一条选择线上输出。

我已经将两个数组都放入一个对象中，并将项目设置为我的对象，然后将item-text设置为countrys数组，并将item-value设置为国家/地区对应值数组。

<dependency>
            <groupId>org.springframework.security.oauth</groupId>
            <artifactId>spring-security-oauth2</artifactId>
            <version>2.0.13.RELEASE</version>
</dependency>

@Configuration
@EnableAuthorizationServer
public class AuthorizationServerConfig extends AuthorizationServerConfigurerAdapter {

    @Override
    public void configure(ClientDetailsServiceConfigurer clients) throws Exception {
        clients.inMemory().withClient("javainuse").secret("{noop}secret")
                .authorizedGrantTypes("authorization_code")
                .scopes("read").authorities("CLIENT");
    }
}

@EnableWebSecurity
@Configuration
public class SecuirtyConfig extends WebSecurityConfigurerAdapter {
    @Override
    @Bean
    public AuthenticationManager authenticationManagerBean() throws Exception {
        return super.authenticationManagerBean();
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests().antMatchers("/").permitAll()
                .and().formLogin()
                .permitAll().and().logout().permitAll();
        http.csrf().disable();
    }

    @Bean
    public UserDetailsService userDetailsService() {
        InMemoryUserDetailsManager manager = new InMemoryUserDetailsManager();
        manager.createUser(User.withDefaultPasswordEncoder().username("user").password("user").roles("USER").build());
        manager.createUser(User.withDefaultPasswordEncoder().username("admin").password("admin").roles("ADMIN").build());
        return manager;
    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.parentAuthenticationManager(authenticationManagerBean())
                .userDetailsService(userDetailsService());
    }
}

@Configuration
@EnableResourceServer
class ResourceServer extends ResourceServerConfigurerAdapter {
    @Override
    public void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
                .antMatchers(HttpMethod.GET, "/api/tags", "/api/languages", "/api/topics").anonymous()
                .antMatchers("/api/users/**").access("#oauth2.hasScope('read')")
                .antMatchers(HttpMethod.POST, "/api/tags/**", "/api/languages/**", "/api/topics/**").access("#oauth2.hasScope('write')")
                .antMatchers(HttpMethod.PUT, "/api/tags/**", "/api/languages/**", "/api/topics/**").access("#oauth2.hasScope('write')")
                .antMatchers(HttpMethod.DELETE, "/api/tags/**", "/api/languages/**", "/api/topics/**").access("#oauth2.hasScope('write')")
                .and().formLogin().permitAll()
                .and().logout().permitAll()
                .and().csrf().disable();
    }
}

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-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>

但是显示为：

china
usa
malaysia
...

Answer 1

我为自己找到了解决方案。将对象放入带有数据的数组中变得容易得多。：）

    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;

},

V-Select一次显示整个阵列

1 个答案: