- 首页
- 前端开发
- 将 vue js 与 selectpicker 一起使用
将 vue js 与 selectpicker 一起使用
[英] Using vue js with selectpicker
本文介绍了将 vue js 与 selectpicker 一起使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用 Vue.js 添加多行，每行包含两个 datetimepicker 输入和一个引导选择.
我的问题是当我填写输入并单击以添加新行时，以前的行会被清除，原因是每次添加新行时我都使用 setTimeout 来引用选择器和日期时间选择器.
所以我想知道是否有一种方法可以在不刷新以前的元素的情况下触发最后添加的元素.
这是我的代码:
HTML
<ul style="list-style-type: none;"><li><button style="float: right;margin-right: 20px;margin-top: 5px;"type="button" class="btn btn-success btn-xs" v-on:click="addRow()"><i class="fa fa-plus"></i>阿约特<li v-for="(row, id) in rows"><div class="form-inline cp-out" style="padding-bottom: 9px;border-radius:4px;background-color:white;margin-left:-20px;display:inline-block;width:100%;margin-top:10px;"><div class="col-md-3"><label :for="['time_start'+id]" class="control-label">开始时间</label><div class="input-group date form_time" style="width:100%;"data-date="" data-date-format="hh:ii" :data-link-field="['time_start'+id]" data-link-format="hh:ii"><input v-model="row.startTime" :name="'rows['+id+'][startTime]'" class="form-control" :id="['startTime' + id]" size="16" type="text" value="" ><span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
<div class="col-md-3"><label :for="['time_end'+id]" class="control-label" style="margin-left:7px;">结束时间</label><div class="input-group date form_time" style="width:100%;"data-date="" data-date-format="hh:ii" :data-link-field="['time_end'+id]" data-link-format="hh:ii"><input v-model="row.endTime" :name="'rows['+id+'][endTime]'" class="form-control" :id="['endTime'+id]" size="16" type="text" value="" ><span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
<div class="col-md-4"><div class="form-group select_group" style="margin-left:5px;"><label :for="['status' + id]" class="control-label">Status</label><select data-width="100%" v-model="row.status" :name="'rows['+id+'][status]'" :id="['status' + id]" class="select_picker" data-live-search="true" 多个 ><option value="状态 1">状态 1</option><option value="状态 2">状态 2</option></选择>
<div class="col-xs-1"><button type="button" class="btn btn_delete btn-xs btn-danger" v-on:click="delRow(id)"><i class="fa fa-remove"></i>删除
JS
app = new Vue({el: '#app',数据: {行:[]},方法: {添加行:函数(){this.rows.push({startTime: '', endTime: '', status: []});设置超时(函数(){$('.select_picker').selectpicker('刷新');$('.form_time').datetimepicker({格式:'LT'});}.bind(this), 10);},delRow:函数(id){this.rows.splice(id, 1);}}，创建:功能(){this.addRow();}});
这是示例:https://jsfiddle.net/rypLz1qg/9/
解决方案
你真的需要写一个 包装组件.Vue 期望控制 DOM，而不是让你在任意时间做出改变 DOM 的事情，比如 *picker 调用.但是，组件让您有机会告诉您的组件如何在其每个生命周期钩子中与 DOM 交互，以便其行为保持一致.请参阅包装器组件示例页面上的 JavaScript 选项卡.
I'm using Vue.js to add multiple rows, each row contain two datetimepicker inputs and a bootstrap-select.
My problem is when I fill the inputs and click to add a new row the previous ones clear out, the reason is each time I add a new row I'm using setTimeout to referesh the selectpicker and the datetimepicker.
So I want to know if there is a way to trigger the last added element them without refreshing the previous ones.
Here is my code :
HTML
<div class="cols" id="app">
<ul style="list-style-type: none;">
<li>
<button style="float: right;margin-right: 20px;margin-top: 5px;" type="button" class="btn btn-success btn-xs" v-on:click="addRow()">
<i class="fa fa-plus"></i> Ajouter
</button>
</li>
<li v-for="(row, id) in rows">
<div class="form-inline cp-out" style="padding-bottom: 9px;border-radius:4px;background-color:white;margin-left:-20px;display:inline-block;width:100%;margin-top:10px;">
<div class="col-md-3">
<label :for="['time_start'+id]" class="control-label">start time</label>
<div class="input-group date form_time" style="width:100%;" data-date="" data-date-format="hh:ii" :data-link-field="['time_start'+id]" data-link-format="hh:ii">
<input v-model="row.startTime" :name="'rows['+id+'][startTime]'" class="form-control" :id="['startTime' + id]" size="16" type="text" value="" >
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
</div>
<div class="col-md-3">
<label :for="['time_end'+id]" class="control-label" style="margin-left:7px;">end time</label>
<div class="input-group date form_time" style="width:100%;" data-date="" data-date-format="hh:ii" :data-link-field="['time_end'+id]" data-link-format="hh:ii">
<input v-model="row.endTime" :name="'rows['+id+'][endTime]'" class="form-control" :id="['endTime'+id]" size="16" type="text" value="" >
<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
</div>
</div>
<div class="col-md-4">
<div class="form-group select_group" style="margin-left:5px;">
<label :for="['status' + id]" class="control-label">Status</label>
<select data-width="100%" v-model="row.status" :name="'rows['+id+'][status]'" :id="['status' + id]" class="select_picker" data-live-search="true" multiple >
<option value="Status 1">Status 1</option>
<option value="Status 2">Status 2</option>
</select>
</div>
</div>
<div class="col-xs-1">
<button type="button" class="btn btn_delete btn-xs btn-danger" v-on:click="delRow(id)">
<i class="fa fa-remove"></i> delete
</button>
</div>
</div>
</li>
</ul>
</div>
JS
app = new Vue({
el: '#app',
data: {
rows: []
},
methods: {
addRow: function () {
this.rows.push({startTime: '', endTime: '', status: []});
setTimeout(function () {
$('.select_picker').selectpicker('refresh');
$('.form_time').datetimepicker({format: 'LT'});
}.bind(this), 10);
},
delRow: function (id) {
this.rows.splice(id, 1);
}
},created:function() {
this.addRow();
}
});
This is the example : https://jsfiddle.net/rypLz1qg/9/
解决方案
You really need to write a wrapper component. Vue expects to control the DOM and not to have you making DOM-changing things like the *picker calls at arbitrary times. However, a component gives you the opportunity to tell your component how to interact with the DOM in each of its lifecycle hooks so that its behavior can be consistent. See the JavaScript tab on the wrapper component example page.
这篇关于将 vue js 与 selectpicker 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
