https://codepen.io/xgqfrms/pen/gyGjKPjavascript
https://codepen.io/xgqfrms/full/gyGjKPcss
bughtml
<!DOCTYPE html> <html lang="zh-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta name="author" content="xgqfrms"> <meta name="generator" content="VS code"> <title>vue & iview</title> <!-- libs --> <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css"> <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script> <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script> <!-- css --> <style lang="css"> .audit-common-lable{ width: 120px; display: inline-block; text-align: left; margin: 5px; } .audit-common-lable-long{ width: 60px; display: inline-block; text-align: right; } .audit-common-lable::after, .audit-common-lable-long::after{ display: inline-block; content: ":"; width: 0; border: 1px; margin: 2px; } </style> </head> <body> <section> <div id="app"> <template> <i-row> <i-col span="24" push="1" style="margin: 5px;"> <span class="audit-common-lable-long">請求方式</span> <i-switch style="width: 57px" size="large" @on-change="onSwitchChange" v-model="isGet"> <span slot="open">GET</span> <span slot="close">POST</span> </i-switch> </i-col> </i-row> </template> <template> <i-row> <i-col span="24" push="1" style="margin: 5px;"> <span class="audit-common-lable-long">URL</span> <i-input v-model="url" placeholder="請輸入 URL!" style="width: 300px" prefix="md-link" /> </i-col> </i-row> </template> <template> <i-row> <i-col span="24" push="1" style="margin: 5px;"> <span class="audit-common-lable-long">受權方式</span> <i-select aria-placeholder="受權方式" placeholder="請選擇受權方式" style="width: 200px" v-model="authorization" @on-change="onChangeSelect(`authorization`)" :filterable="false" :clearable="false"> <i-option v-for="(item, i) in authorizations" :value="item.value" :key="i"> {{item.title}} </i-option> </i-select> </i-col> </i-row> </template> <template> <i-row v-if="authorization==='auth'"> <i-col span="24" push="1" style="margin: 5px;"> <span class="audit-common-lable-long">Username</span> <i-input v-model="url" placeholder="請輸入 Username!" style="width: 300px" prefix="md-contact" /> </i-col> <i-col span="24" push="1" style="margin: 5px;"> <span class="audit-common-lable-long">Password</span> <i-input v-model="url" placeholder="請輸入 Password!" style="width: 300px" prefix="md-lock" /> </i-col> </i-row> </template> <template> <i-row v-if="authorization==='token'"> <i-col span="24" push="1" style="margin: 5px;"> <span class="audit-common-lable-long">Token</span> <i-input v-model="url" placeholder="請輸入 Token!" style="width: 300px" prefix="md-lock" /> </i-col> </i-row> </template> <template v-if="isGet"> <i-row> <i-col span="18" push="1" style="margin: 5px;"> <span class="audit-common-lable">GET 參數列表</span> <i-button @click="addGetParams" size="small"> + 添加 </i-button> <!-- :maxHeight="maxGetHeight" --> <i-table style="margin: 5px; max-height: 300px; overflow-y: auto;" :columns="colsGET" :data="dataGET"> </i-table> </i-col> </i-row> </template> <template v-else> <i-row> <i-col span="23" push="1" style="margin: 5px;"> <span class="audit-common-lable">POST 參數方式</span> <i-switch style="width: 57px" size="large" @on-change="onSwitchRadioChange" v-model="isJSON"> <span slot="open">form data</span> <span slot="close">JSON</span> </i-switch> </i-col> <i-col span="23" push="1" style="margin: 5px;" v-if="isJSON"> <span class="audit-common-lable">參數類型(form data)</span> <i-table style="margin: 5px;" :columns="colsPOST" :data="dataPOST"> </i-table> </i-col> <i-col span="6" push="1" style="margin: 5px;" v-else> <span class="audit-common-lable">參數類型(JSON)</span> <i-input style="margin: 5px; width: 500px;" placeholder="請輸入 JSON String" v-model="jsonString" :rows="8" type="textarea"> </i-input> </i-col> </i-row> </template> <template> <i-row> <i-col span="24" push="1" style="margin: 5px;"></i-col> <i-col span="2" push="1" style="margin: 5px;"> <i-button @click="showSave" size="small" type="warning"> 保存 </i-button> </i-col> <i-col span="2" push="0" style="margin: 5px;"> <i-button :disabled="!isSaved" @click="showExecute " size="small" type="primary"> 執行 </i-button> </i-col> </i-row> <Modal v-model="saveModal.visible" title="肯定保存"> <span></span> <div slot="footer"> <i-button type="error" size="large" :loading="saveModal.loading" @click="cancelSave"> 取消 </i-button> <i-button type="success" size="large" :loading="saveModal.loading" @click="resureSave"> 肯定 </i-button> </div> </Modal> <Modal v-model="executeModal.visible" @on-ok="resureExecute" @on-cancel="cancelExecute" title="肯定執行"> <!-- 肯定執行 --> </Modal> </template> </div> </section> <!-- js --> <script> new Vue({ el: "#app", data: { saveModal: { visible: false, loading: false, }, executeModal: { visible: false, loading: false, }, isGet: true, colsGET: [ { title: "key", key: "keyword", }, { title: "value", key: "value", }, { title: "desc", key: "description", render: (h, params) => { let { isEdit, description: desc, } = params.row; if (isEdit) { return h("div", [ h("input", { attrs: { value: desc, placeholder: "請輸入描述信息", } }, ""), ]); } else { return h("div", [ h("span", desc), ]); } } }, { title: "操做", key: "operate", render: (h, params) => { let that = this; let isEdit = params.row.isEdit; let edit = params.row.operate[0]; let save = params.row.operate[1]; if (isEdit) { return h("div", [ h("Icon", { props: { name: "person" } }), h("a", { on: { click: () => { console.log(`row =\n`, JSON.stringify(params.row, null, 4),); that.clickSave(params.row.index); }, }, }, save), ]); } else { return h("div", [ h("a", { on: { click: () => { console.log(`編輯 row =\n`, JSON.stringify(params.row, null, 4), params.row.index); that.clickEdit(params.row.index); }, // click: that.clickEdit(params.row.index), }, }, edit), ]); } }, }, ], dataGET: [ { index: 0, keyword: "a", value: "1", description: "a=1", operate: ["edit", "save", "cancel"], isEdit: true, // isEdit: false, }, { index: 1, keyword: "b", value: "2", description: "b=1", operate: ["edit", "save", "cancel"], isEdit: false, }, ], colsPOST: [], dataPOST: [], authorizations: [ { title: "No Auth", value: "no", }, { title: "Basic Auth", value: "auth", }, { title: "Bearer Token", value: "token", }, ], url: "", authorization: "no", isJSON: true, postType: "form", jsonString: "", isSaved: false, maxGetHeight: 300, }, methods: { addGetParams() { this.dataGET.push({ keyword: "a", value: "1", description: "a=1", operate: ["edit", "save", "cancel"], }); }, showSave() { this.saveModal.visible = true; }, showExecute() { this.executeModal.visible = true; }, resureSave() { this.saveModal.visible = false; this.isSaved = true; }, cancelSave() { this.saveModal.visible = false; this.isSaved = false; }, resureExecute() { this.executeModal.visible = false; }, cancelExecute() { this.executeModal.visible = false; }, onSwitchChange() { // this.isGet = !this.isGet; console.log(`value =`, this.isGet); }, onSwitchRadioChange() { let value = this.isJSON; console.log(`isJSON value =`, value); if (value) { this.postType = "json"; } else { this.postType = "form"; } console.log(`postType = `, this.postType); }, onChangeSelect (type = ``) { let value = this[type]; // this.$Message.info(value); }, onChangeRadio (type = ``) { let value = this[type]; this.$Message.info(value); }, onChangeRadioGroup (type = ``) { let value = this[type]; this.$Message.info(value); }, clickSave(index = ``) { if (index !== ``) { console.log(`table index =`, index); this.dataGET[index].isEdit = true; } }, clickEdit(index = ``) { if (index !== ``) { console.log(`table index =`, index); this.dataGET[index].isEdit = true; } }, }, mounted() { // }, }) </script> </body> </html>
vue & TypeError: is not a functionvue
https://stackoverflow.com/questions/49950029/vue-uncaught-typeerror-fn-bind-is-not-a-functionjava