use vue
i want to insert an element when i click createItem:
<template>
<div class="form-row group">
<h5 class="p-2 col-md-12">item</h5>
<div class="form-row">
<div class="form-group mr-2">
<input type="number" class="form-control" placeholder="Num" v-model="tempitemNum">
</div>
<div class="form-group">
<button class="btn btn-primary btn-sm mt-1" #click="createItem">create</button>
</div>
</div>
<div class="items col-md-12 mt-1 mb-1">
//create item here
</div>
</div>
</template>
my script function
createItem: function(){
let items = document.querySelector('.items');
if(this.itemNum == 0){
this.itemNum = parseInt(this.tempitemNum);
for (let i = 0; i < this.itemNum; i++) {
let item = document.createElement('div');
item.className = "col-md-12 mb-1 pl-0 pr-0";
item.innerHTML = `
<div>
<span>${i+1}.</span>
<input type="text" class="form-control">
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
`
items.insertAdjacentElement("beforeend", item);
}}}
how can i insert item with v-model in every input element?
You can use jsx to render Dom elements and now you can use v-model with it you can check: https://github.com/nickmessing/babel-plugin-jsx-v-model
Related
I have four inputs in the same row and one of the input is conditionally visible by clicking "Click" button.
So if all four inputs are visible, the inputs datepicker1 and datepicker2 are sticked on the inputs above.
What is the correct bootstrap way to arrange and beautify the distances between the inputs?.
Gutters are not available on bootstrap 3.
<div class="col-md-3">
<select class="lookup-type-select form-control" name="created_lookup_type_1">
<option value="range">Range</option>
<option value="range__exclude">Exclude Range</option>
</select>
</div>
<div class="lookup-value">
<div class="col-md-3">
<select name="created__1_0" class="filter-input shortcut form-control" id="id_created__1_0">
</select>
</div>
<div class="col-md-8 row custom" style="display: inline;">
<div class="col-md-6">
<div class="datetimepicker input-group start-date date" data-date-format="YYYY-MM-DD HH:mm:ss">
<input class="filter-input form-control" name="created__1_1" value="" type="text" id="datepicker1" placeholder="From">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
<div class="col-md-6">
<div class="datetimepicker input-group end-date date" data-date-format="YYYY-MM-DD HH:mm:ss">
<input class="filter-input form-control" name="created__1_2" value="" type="text" id="datepicker2" placeholder="To">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
<div class="col-md-3 row month_only" style="display: none;">
<div>
<div class="datetimepicker input-group start-date date month_only" style="display: none;">
<input class="filter-input form-control" name="created__1_3" value="" type="text" id="id_created__1_3" placeholder="Month">
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
</div>
<button type="button" class="btn remove-button">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button onclick="myFunction()">Ckick</button>
<script>
function myFunction() {
if (document.getElementById('id_created__1_0').style.display != "none") {
document.getElementById("id_created__1_0").style.display = "none";
} else {
document.getElementById("id_created__1_0").style.display = "inline";
}
}
</script>
Jsfiddle example
Should be like the following pic
Whenever I open the component, the previous information that I've typed still remains in the Input Boxes. I have three input box. One is not inside a form tag and the other two are inside a form tag. How do we clear the Input Boxes when I open the component? I tried using this.form.reset(); but it does not work.
<!-- left column -->
<div class="col">
<div class="form-group">
<label>Scan Item</label>
<input type="search" class="form-control is-warning" id="exampleSearchItemBarcode" placeholder="Item Barcode"
#keyup.enter="searchloanItem"
v-model="itemvmodel"
autocomplete="off">
</div>
</div>
</div>
<!-- right column -->
<div class="col">
<div class="card-body">
<form #submit.prevent="createLoan">
<div class="form-group" v-for="loanpatron in loanpatrons" :key="loanpatron.id">
<input type="text" name="patron_id"
v-model="form.patron_id"
class="form-control text-uppercase"
:class="{ 'is-invalid': form.errors.has('patron_id') }"
autocomplete="off">
<has-error :form="form" field="patron_id"></has-error>
</div>
<!-- textarea -->
<div class="form-group">
<label>Date Loaned</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
</div>
<input v-model="form.dateloaned" type="date" name="dateloaned" class="form-control" :class="{ 'is-invalid': form.errors.has('dateloaned') }"
data-inputmask-alias="datetime" data-inputmask-inputformat="dd/mm/yyyy" data-mask="" im-insert="false">
</div>
<has-error :form="form" field="dateloaned"></has-error>
</div>
<div class="row">
<div class="col">
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
<script>
export default {
mounted() {
this.form.reset();
}
}
</script>
I am trying to empty the form after it submits form but I am unable to do this. Here is the code
<form class="form-horizontal" #submit.prevent="addtodirectory" id="form-directory">
<div class="model-body">
<div class="card-body">
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input v-model="form.name" type="text" name="name"
class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
<has-error :form="form" field="name"></has-error>
</div>
</div>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Address</label>
<div class="col-sm-10">
<textarea v-model="form.address" type="text" name="address"
class="form-control" :class="{ 'is-invalid': form.errors.has('address') }"></textarea>
<has-error :form="form" field="address"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Profession</label>
<div class="col-sm-10">
<input v-model="form.profession" type="text" name="profession"
class="form-control" :class="{ 'is-invalid': form.errors.has('profession') }">
<has-error :form="form" field="profession"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Contact Number</label>
<div class="col-sm-10">
<input v-model="form.contact_number" type="text" name="contact_number"
class="form-control" :class="{ 'is-invalid': form.errors.has('contact_number') }">
<has-error :form="form" field="contact_number"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">City</label>
<div class="col-sm-10">
<input v-model="form.city" type="text" name="city"
class="form-control" :class="{ 'is-invalid': form.errors.has('city') }">
<has-error :form="form" field="city"></has-error>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">State</label>
<div class="col-sm-10">
<select v-model="form.state" type="text" name="state"
class="form-control" :class="{ 'is-invalid': form.errors.has('state') }">
<has-error :form="form" field="state"></has-error>
<option value="Rajasthan">Rajasthan</option>
<option value="Gujrat">Gujrat</option>
</select>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
<button type="submit" class="btn btn-success">Submit</button>
<button type="submit" class="btn btn-default float-right">Cancel</button>
</div>
<!-- /.card-footer -->
</div>
</form>
<script>
export default {
data() {
return {
news:{},
form: new Form({
name : '',
address:'',
profession:'',
city:'',
state:''
})
}
},
methods: { addtodirectory() {
this.$Progress.start();
this.form.post('api/addtodirectory');
Toast.fire({
type: 'success',
title: 'Directory Updated successfully'
})
$('#form-directory input[type="text"]').val('');
this.$Progress.finish();
}
}
I am using vform plugin to submit the form. Using Laravel as backend. The data is being submitted in database but I am not able to clear the form. please help in this regarding. Should I use jquery or javascript to clear the form? I tried different ways but I could not figure out the problem.
Simply empty your form object after form submit.
form: new Form({
name : '',
address:'',
profession:'',
city:'',
state:''
})
Well it was simple and I did following code for emptying the form.
addtodirectory(event) {
this.$Progress.start();
this.form.post('api/addtodirectory');
// document.getElementById("form-directory").reset();
console.log('durgesh');
// document.getElementsByName('name').value = '';
Toast.fire({
type: 'success',
title: 'Directory Updated successfully'
})
this.form.name = "";
this.form.profession ="";
this.form.address="";
this.form.city = "";
this.form.state = "";
this.$Progress.finish();
},
after submitting the form I did not used the form. so after doing this I emptied the form.
Or in a one-liner:
Object.keys(form).forEach(v => form[v] = "")
instead of:
this.form.name = "";
this.form.profession ="";
this.form.address="";
this.form.city = "";
this.form.state = "";
I have a VueJS component which populates a table via ajax, than I have a modal form inside component which creates new entries in table.
On modal hide I want to update the table to show new entries.
export default {
created() {
axios.get('/api/v1/customers')
.then(response => {
this.customers = response.data;
});
},
methods: {
store() {
this.form.errors = [];
axios.post('/api/v1/customers', this.form)
.then(response => {
this.form.name = '';
this.form.scopes = [];
this.form.errors = [];
$('#modal-edit-client').modal('hide');
this.$forceUpdate();
})
.catch(error => {
console.log(error)
/*if (typeof error.response.data === 'object') {
this.form.errors = _.flatten(_.toArray(error.response.data));
} else {
this.form.errors = ['Something went wrong. Please try again.'];
}*/
});
},
newUser: function () {
$('#modal-edit-client').modal('show');
},
edit: function () {
alert('edit modal')
}
},
data() {
return {
customers: {},
alert: {
show: false,
type: null,
title: null,
message: null,
},
form: {
scopes: [],
errors: []
}
};
}
}
I tried to use $forceUpdate() but does not seems to work
output template
<template>
<div class="row" v-cloak>
<div class="col-md-12 ">
<div class="panel panel-default custom-panel">
<div class="panel-heading">
<strong>Customers</strong>
<div id="custom-search-input">
<div class="input-group col-md-12">
<input v-on:keyup.enter="filter" type="text" class="form-control input-sm" placeholder="Search Customer" />
<span class="input-group-btn">
<button class="btn btn-info btn-lg" type="button">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<a class="btn icon-btn btn-success" id="new__item" href="#" #click="newUser">
<span class="glyphicon btn-glyphicon glyphicon-plus img-circle text-success"></span> Add Customer
</a>
</div>
<div class="panel-body">
<table class="table table-condensed">
<tbody>
<tr>
<th style="width: 10px">#</th>
<th>Firma</th>
<th>Strasse</th>
<th>PLZ</th>
<th>Ort</th>
<th>Tel</th>
<th>Status</th>
<th>Actions</th>
</tr>
<tr v-for="customer in customers">
<td>{{ customer.id }}</td>
<td>{{ customer.customer_name }}</td>
<td>{{ customer.customer_street }}</td>
<td>{{ customer.customer_plz }}</td>
<td>{{ customer.customer_city }}</td>
<td>{{ customer.customer_telephone }}</td>
<td><span class="badge bg-green"><i class="fa fa-check"></i></span></td>
<td class="actions">
<i class="fa fa-pencil"></i>
<i class="fa fa-trash"></i>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Edit Client Modal -->
<div class="modal fade" id="modal-edit-client" tabindex="-1" role="dialog">
<div class="spinner"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">
Add Customer
</h4>
</div>
<div class="modal-body">
<!-- Form Errors -->
<!--<div class="alert alert-danger" v-if="alert" >
<p><strong>Whoops!</strong> Something went wrong!</p>
<br>
</div>-->
<!-- Edit Client Form -->
<form class="form-horizontal" id="modal-create-customer" role="form" method="POST" action="">
<div class="row">
<div class="col-xs-12">
<label for="customer_name" class="control-label">Firmenbezeichnung</label>
<input id="customer_name" type="text" class="form-control" v-model="form.customer_name" name="customer_name" value="" required autofocus>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="sex" class="control-label">Anrede</label>
<select v-model="form.customer_contact_sex" name="title" id="sex" class="form-control">
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="title" class="control-label">Title</label>
<select v-model="form.customer_contact_title" name="title" id="title" class="form-control">
<option value="">No title</option>
<option value="Dr.">Dr.</option>
<option value="Prof.">Prof.</option>
</select>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label for="name" class="control-label">First Name</label>
<input id="name" type="text" class="form-control" v-model="form.customer_first_name" name="customer_name" value="" required autofocus>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="email" class="control-label">Last Name</label>
<input id="email" type="text" class="form-control" v-model="form.customer_last_name" name="customer_last_name" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="street" class="control-label">Street</label>
<input id="street" type="text" class="form-control" v-model="form.customer_street" name="customer_street" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-2">
<label for="plz" class="control-label">PLZ</label>
<input id="plz" type="text" class="form-control" v-model="form.customer_plz" name="customer_plz" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-4">
<label for="city" class="control-label">City</label>
<input id="city" type="text" class="form-control" v-model="form.customer_city" name="customer_city" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_telephone" class="control-label">Tel.</label>
<input id="customer_telephone" type="text" class="form-control" v-model="form.customer_telephone" name="customer_telephone" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_fax" class="control-label">Fax.</label>
<input id="customer_fax" type="text" class="form-control" name="customer_fax" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_mobile" class="control-label">Mobil</label>
<input id="customer_mobile" type="text" class="form-control" name="customer_mobile" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-6">
<label for="customer_email" class="control-label">E-Mail.</label>
<input id="customer_email" type="text" class="form-control" name="customer_email" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
<div class="col-xs-12">
<label for="customer_note" class="control-label">Notiz</label>
<textarea name="csutomer_note" id="customer_note" class="form-control"></textarea>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
</form>
</div>
<!-- Modal Actions -->
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" #click="store">
Register
</button>
</div>
</div>
</div>
</div>
</div>
</template>
As said in the comments, your code looks fine except that you're not actually updating the customers property with anything.
When you're performing the XHR request with Axios, you need to use the response to populate the component, which will automatically update the relevant DOM.
Here is the relevant part of your code that you should modify:
axios.post('/api/v1/customers', this.form)
.then(response => {
this.form.name = '';
this.form.scopes = [];
this.form.errors = [];
// Set the component's customers property to what you get
// in the response
this.customers = response.data.customers;
$('#modal-edit-client').modal('hide');
// You don't need to forceUpdate as Vue will take care of
// rerendering the relevant parts of the DOM
// this.$forceUpdate();
})
Also, considering you're expecting an array of customers to render the table, you should set the customers default value accordingly:
data() {
return {
customers: []
// ...
};
}
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.