Vue.js:Select--Option >下拉框繫結和取值
阿新 • • 發佈:2019-02-19
遇到了這個解決了,所以記錄一下:
完成vue.js下拉框選擇繫結與取值,實現效果圖如下:
template程式碼
<template> <div> <Form :model="formItem" ref="formItem" :rules="ruleInline" :label-width="80"> <FormItem label="完成狀態 : " prop="sendValue"> <Select style="width:200px" v-model="formItem.sendValue"> <Option v-for="item in formItem.stateList" :value="item.value" :key="item.value" name="sendValue">{{ item.label }} </Option> </Select> </FormItem> </Form> </div> </template>
js程式碼
<script type="text/ecmascript-6"> export default { mounted() { this.getData(); }, methods: { /** * 提交資料 * @param name */ submit(name) { this.$refs[name].validate((valid) => { if (valid) { let temp = {}; var url = this.ServerIp + this.API.editDemand + "/d_id/" + this.$route.query.d_id; var that = this; var params = {}; params.d_create_user = this.formItem.d_create_user; params.d_progress = this.formItem.d_progress, params.d_status = this.formItem.sendValue, params.edit = 1; this.modal_loading = true; console.log(params.de_enclosure); this.$http({ method: 'post', url: url, data: params, }).then((res) => { this.modal_loading = false; if (res.data.success) { that.$Message.success('需求編輯成功'); this.$refs[name].resetFields(); //路由跳轉 // this.$router.push({path: '/forumCategoryList'}); } else { that.$Message.error(res.data.result); } }); } }); }, data() { return { modal_loading: false, questionImageIsShow: false, formItem: { d_title: "", u_phone: "", stateList: [ { value: '0', label: '待分配' }, { value: '1', label: '開發中' }, { value: '2', label: '已完成' }, { value: '3', label: '停用' }, { value: '4', label: '已變更' } ] } } </script>
上述程式碼中this.formItem.sendValue獲取我們最終選中的值,可以做其他的操作了。