A select control that implements a remote request JSON based on Vue.js

Basic ideas

• The front end takes the required parameter type encoding to the background, returns the corresponding parameter list JSON in the background, and the front end uses Vue to render the select control

Specific implementation

• Front-end Code

<select v-model="template.type" class="form-control">      <option value="">请选择...</option> <option v-for="option in options" v-bind:value="option.macroId"> {{ option.name }} </option></select>

• JS Call

var vm =new Vue ({data: {options: [], template: {type: null}}, methods: {gettemplatetype:  function (null, function (data) {vm.options = data;}); }}, created: function (this.gettemplatetype ();})        

• Controller implementation

/** * 获取某个类型所有参数值，用于前台构建下拉框 * @param value * @return */@RequestMapping("/value")public List<SysMacroEntity> listMacroValue(@RequestParam String value) {return sysMacroService.listMacroValue(value);}

• Querying SQL statements

<select id="listMacroValue" resultType="SysMacroEntity">SELECTmacro_id,name,valueFROMsys_macroWHEREtype_id =(SELECTmacro_idFROMsys_macroWHEREvalue = #{value})AND STATUS = 1ORDER BY macro_id;</select>

A select control that implements a remote request JSON based on Vue.js