iview render bug
https://codepen.io/xgqfrms/pen/gyGjKP
https://codepen.io/xgqfrms/full/gyGjKP
bug
<!DOCTYPE html>
<html >
<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" target="_blank" rel="external nofollow" >
<!-- css -->
<style >
.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 -->
</body>
</html>
vue namespace bug
vue & TypeError: is not a function
https://stackoverflow.com/questions/49950029/vue-uncaught-typeerror-fn-bind-is-not-a-function
轉載于:https://www.cnblogs.com/xgqfrms/p/10711196.html