此外,搜索v模型输入不会显示在摘要中
以下是表单,位于jsfiddle
下面是填写表单后的外观示例
<!文档类型HTML>
<html lang=“en”>
<头部>
<meta charset=“utf-8”/>
<meta http equiv=“x-ua-compatible”content=“ie=edge,chrome=1”/>
<meta content='width=device width,initial scale=1.0,maximum scale=1.0,user scalable=0,shrink to fit=no'name='viewport'
/>
<样式>
输入、选择、按钮{
浮动:左;
显示:块;
清楚:两者都清楚;
最小宽度:200px;
页底:1页;
}
.maxfee、.summary、p.summaryresult{
浮动:左;
显示:块;
清除:两个
}
</style>
<!--vue.js cdn——>
<script src=“https://unpkg.com/vue”></script>
</head>
<正文>
<form name=“MyForm”id=“DeliveryService”>
<!--<pre>items.shortcode</pre>-->
<!--从外部JSON文件加载到dayslots中-->
<input name=“day slot”v-for=“item in searchedslots”v-model.lazy=“dayslotv”type=“text”placeholder=“enter day and delivery slot”必需>
<选择v-model=“search”>
<option v-for=“item in items”v-bind:value=“item.slot”>
item.shortcode item.slot
</选项>
</选择>
<选择v-model=“servicev”Required>
<选项已选择已禁用隐藏>请选择</选项>
<option value=“standard”>标准</option>
<option value=“安装”>安装</option>
</选择>
<!--客户添加他们希望支付的最大金额-->
<div class=“maxfee”>
<input name=“price”v-model.number=“pricev”type=“currency”placeholder=“将支付的最高价格”必需>
</DIV>
<!--然后,在提交之前,我们将显示他们选择的选项的摘要-->
<DIV class=“summary”><P>摘要:</P></DIV>
<p class=“SummaryResult”style=“font-weight:bold;”>我希望search.shortcode开启服务并支付不超过</p>
<button type=“submit”>提交</button>
</Form>
<脚本>
const app=新Vue({
el:“交付服务”,
数据:{
项目:[],
搜索:“”,
日槽:“”,
服务v:“”,
价格:“”
},请
已创建:函数()。{
fetch('https://s3.eu-west-2.amazonaws.com/dayslots10/dayslots.json')
。然后(resp=>resp.json())
。然后(items=>){
this.items=项目
})
},请
})(二)
</script>
</body>
</html>
computed: {
searchedSlots: function() {
return this.items.filter(function(item) {
return (
(item.shortcode.toLowerCase().match(this.searchTerms.toLowerCase())) ||
(item.slots.toLowerCase().match(this.searchTerms.toLowerCase()))
)
}.bind(this));
}
}
此外,搜索v模型输入不显示在总结
这是下表JSFiddle
下面是填写表单后的外观示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'
/>
<style>
input, select, button {
float:left;
display:block;
clear:both;
min-width:200px;
margin-bottom: 1rem;
}
.maxfee, .summary, p.summaryresult {
float:left;
display:block;
clear:both
}
</style>
<!-- Vue.js CDN -->
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<form name="myform" id="deliveryservice">
<!--<pre>{{ items.shortcode }}</pre>-->
<!-- Load in dayslots from external JSON file -->
<input name="dayslot" v-for="item in searchedSlots" v-model.lazy="dayslotv" type="text" placeholder="Enter Day and Delivery Slot" required>
<select v-model="search">
<option v-for="item in items" v-bind:value="item.slot">
{{ item.shortcode }} {{ item.slot }}
</option>
</select>
<select v-model="servicev" required>
<option selected disabled hidden>Please Select</option>
<option value="standard">Standard</option>
<option value="installation">Installation</option>
</select>
<!-- Customer adds the max amount they wish to pay -->
<div class="maxfee">
<input name="price" v-model.number="pricev" type="currency" placeholder="Max price you will pay" required>
</div>
<!-- We then display a summary of the options they chose, before they submit -->
<div class="summary"><p>Summary:</p></div>
<p class="summaryresult" style="font-weight:bold;">I would like {{ search.shortcode }} on {{ servicev }} service and pay no more than £{{ pricev }}</p>
<button type="submit">Submit</button>
</form>
<script>
const app = new Vue({
el: '#deliveryservice',
data: {
items: [],
search: '',
dayslotv: '',
servicev: '',
pricev: ''
},
created: function() {
fetch('https://s3.eu-west-2.amazonaws.com/dayslots10/dayslots.json')
.then(resp => resp.json())
.then(items => {
this.items = items
})
},
});
</script>
</body>
</html>
