始终选择第一个值Select vue.js
Select always first value select vue.js
如何总是用select(在vue.js中(选择第一个项目?
<div class="ride-item-content">
<select v-model="ride.location_id">
<option v-for="location in locations" v-bind:value="location.id">
{{ location.from }} - {{ location.to }}
</option>
</select>
</div>
json
{
"locations": {
"total": 2,
"per_page": 20,
"current_page": 1,
"last_page": 1,
"next_page_url": null,
"prev_page_url": null,
"from": 1,
"to": 2,
"data": [
{
"id": 1,
"user_id": 1,
"description": "sdg",
"from": "asdf",
"to": "asdf",
"kmz": "12",
"kmp": "13",
"time": 0,
"hour": 0,
"maps": "www.blablabla.nl",
"created_at": null,
"updated_at": null
},
{
"id": 2,
"user_id": 1,
"description": "asdf",
"from": "asdf",
"to": "asdf",
"kmz": "3",
"kmp": "1",
"time": 1,
"hour": 0,
"maps": "www.test.nl",
"created_at": null,
"updated_at": null
}
]
}
}
--编辑--
<div class="ride-item-content">
<select v-model="ride.location_id">
<option v-for="location in locations" v-bind:selected="$index === 0 ? 'selected' : false">
{{ location.from }} - {{ location.to }}
</option>
</select>
</div>
VueJS 1:
<option v-for="location in locations" v-bind:value="location.id" v-bind:selected="$index === 0 ? 'selected' : false">
{{ location.from }} - {{ location.to }}
</option>
VueJS 2:
<option v-for="(location, index) in locations" v-bind:value="location.id" v-bind:selected="index === 0">
{{ location.from }} - {{ location.to }}
</option>
在Vue 1中,$index
在v-for
循环中自动可用。
在Vue 2中,您需要显式地为索引声明一个变量。
在您的json中,我找不到location.id
。你的"locations"
是obj。但如果"locations"
是arr,你可以使用这个:
<select v-model="selectedLocation">
<option v-for="location in locations" :key="location.id" :value=location.id>
{{ location.somekey }}
</option>
</select>
数据中-
selectedLocation: this.locations.length ? this.locations[0].id : ''
它可以工作,因为您的选择取决于选定的位置(v-model)
。
您可以在选择中使用v-model,当您加载列表时,将第一个值传递给模型变量,并且总是会选择第一个值
created(){
if(this.locations) {
this.ride.location_id = this.locations[0].id
}
}
工作示例jsfidelle链接https://jsfiddle.net/Rashid_Bukhari/q2ro6pz1/20/
您只需要将您的v-model ride.location_id
更新为vuejs created(){}
或mounted(){}
方法
类似于@J。布鲁尼的回答,尽管这似乎对你不起作用。试试这个:
<option v-for="location in locations" v-bind:value="location.id" v-bind:selected="$index === 0 ? true : false">
{{ location.from }} - {{ location.to }}
</option>
相关文章:
- jquery点击函数select&取消选择
- 在html Select中添加搜索
- 如何创建带有插槽的vue js组件预加载程序
- Jquery:未触发select事件
- 如何在PHP中使用$_POST获取Select元素值
- 无法在Ionic select中预先选择最后一个选项
- Dojo:访问dijit.form.Select中单击的项目
- [Vue warn]:未能解析组件
- X秒后刷新select元素
- 根据select选项元素将表单重定向到不同的URL
- 在select元素中显示highchart dashstyle(svg)
- jQuery动态表单显示在select选项上
- Javascript Select OnChange没有'不要第二次工作
- 引用vue.js中v-for中的上一个值
- 更改基于它的Select OPTION's INDEX(Jquery)
- 正在获取select上的功能id
- 根据Select值添加/删除表行
- Vue.js双向数据绑定不适用于Select元素
- 使用Vue 2.0从getmdl-select中选择输入
- 始终选择第一个值Select vue.js