Vue选择了选项

时间:2018-06-11 16:04:59

标签: vue.js vuejs2

我正在尝试更改页面加载时选定的选项。当页面被加载并且new或used不为null时,我想要选择的那个不是null,而不是选择状态。我已经尝试了很多东西,但没有任何工作,也无法在线完成如何使这项工作。

我在没有v-bind的情况下尝试了它,没有v-model,以及我在网上看到的其他方式。

@Configuration
@EnableSwagger2
public class SwaggerConfig {
@Bean
public Docket productApi() {
    return new Docket(DocumentationType.SWAGGER_2)

     .select().apis(RequestHandlerSelectors.basePackage("com.fd.cart"))
            .paths(PathSelectors.any())
            .build()
            .apiInfo(metaData());

} 
private ApiInfo metaData() {
    return new ApiInfoBuilder()
            .title("MY REST API")
            .description("\"Myportal portal checkout REST APIs\"")
            .version("1.0.0")
            //.license("Apache License Version 2.0")
           // .licenseUrl("https://www.apache.org/licenses/LICENSE- 
           2.0\"")
            //.contact(new Contact("John Thompson", 
         "https://springframework.guru/about/", 
         "john@springfrmework.guru"))
            .build();
           }


/* TRIED THIS BUT DIDN'T WORK.
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("swagger-ui.html")
            .addResourceLocations("classpath:/META-INF/resources/");

    registry.addResourceHandler("/webjars/**")
            .addResourceLocations("classpath:/META- 
           INF/resources/webjars/");
   }*/
}

无论状态总是出现,对不对。

1 个答案:

答案 0 :(得分:0)

您需要以某种方式设置selected的值。一种方法是,Sphinx指出in their comment,是使用mounted()生命周期钩子:



const app = new Vue({
  el: "#app",
  mounted() {
    this.selected = "used";
  },
  data() {
    return {
      selected: "",
      item: "new"
    };
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>

<div id="app">
  <select id="application-status" class="custom-select" v-model="selected">
    <option :value="null" disabled>Status</option>
    <option :value="'new'" v-bind:selected="item.new != null">New</option>
    <option :value="'used'" v-bind:selected="item.used != null">Used</option>
  </select>
</div>
&#13;
&#13;
&#13;