I just want to know if what i'm doing is correct.
The goal
here is to convert all input fields in a v-model.
Right now im using jQuery to do that, and is working well.
Is there any way to do it with pure vue.js?
Some considerations:
I don't want to use v-model or any vue attribute on the html like ref="foo".
The data must be in and object and I don't want to predefine.
Thanks
const vueApp = new Vue({
el: '#vue-app',
data: {
dataForm: {}
},
created() {
$("input").each(function(){
var $input_name = 'dataForm.' + $(this).attr('name');
$(this).attr('v-model', $input_name);
});
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="vue-app">
<div class="">
First Nane : {{ dataForm.firstName }}
</div>
<div class="">
Last Name : {{ dataForm.lastName }}
</div>
<div class="">
<input type="text" name="firstName" value="">
<input type="text" name="lastName" value="">
</div>
</div>
Related
I have an array of products to fill (Product fields: {type:"",name:""}).
There is a variable that takes the number of products to enter. Then, for each product, a separate div is rendered with one select and one input text.
I need to get data from each such block and put them in an array.
<div v-for="n in parseInt(countProd)" :key="n">
<div>
<select>
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
<input placeholder="Product name">
</div>
</div>
Let me know if this make sense.
new Vue({
el: '#app',
data() {
return {
title: "Vue 2 app",
countProd:0,
products:[]
};
},
watch:{
countProd(newVal,old){
console.log(old,newVal)
this.products=Array.from({length:newVal},(v,i)=>{
return { type:'1', name:''}
})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
No. of Products:
<input v-model="countProd" />
<div v-for="(p,n) in products" :key="n">
<div>
<select v-model="products[n].type">
<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>
</select>
<input placeholder="Product name" v-model="products[n].name">
</div>
</div>
<p v-if="products.length>0">{{products}}</p>
</div>
Here i have an #click event
<h2 #click="action(customer.id)">{{ customer.name }}</h2>
When any result is clicked append this result to the input. Any ideas ?
<input class="search" type="text" name="search" v-model="search" placeholder="Search posts..."
#focus="magic_flag = true">
<div v-if="magic_flag">
<div class="post" v-for="customer in filteredCustomer">
<h2 #click="action(customer.id)">{{ customer.name }}</h2>
</div>
</div>
How can i append the clicked result from the search to the input?
js here updated:
methods: {
action(item) {
this.selected = item
this.search = item.name
this.magic_flag=false;
}
},
I display the rest of the content here updated:
<div v-if="selected">
<div class="post" v-for="customer in filteredCustomer">
<div v-if="customer === selected">
<h1>{{ customer.name }}</h1>
<h1>{{ customer.id }}</h1>
<h1>{{ customer.address }}</h1>
</div>
</div>
</div>
Instead of passing customer.id to the action method, you can pass customer object as parameter to action.
You can do something like this.
var vm = new Vue({
el: '#app',
data: {
search: "",
filteredCustomer:[{name:'test1',id:1},{name:'test2',id:2},{name:'test3',id:3}]
},
methods: {
action (customer) {
this.search=customer.name
this.filteredCustomer=this.filteredCustomer.filter(o=> o.id!=customer.id)
}
}
});
h2{cursor:pointer}
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js" type="text/javascript"></script>
<div id="app">
<input class="search" type="text" name="search" v-model="search" placeholder="Search posts..."
>
<div >
<div class="post" v-for="customer in filteredCustomer">
<h2 href #click="action(customer)">{{ customer.name }}</h2>
</div>
</div>
</div>
I have an array of objects which I iterate over with v-for and create an input for one of the object's properties and use vee-validate on that input. I want to validate lazily so I use v-model.lazy to update only on change and this is where the issue occurs. The data binding doesn't seem to happen correctly. The below fiddle reproduces my issue. Any advice would be much appreciated.
https://jsfiddle.net/1r944gnc/
Vue.use(VeeValidate)
new Vue({
el: '#app',
data: {
users: [
{
email: null
}
]
},
methods: {
}
})
<div id="app">
<div v-for="user in users">
<input type="text" name="foo" v-model.lazy="user.email" v-validate="'email'" />
<span v-show="errors.has('foo')">{{ errors.first('foo') }}</span>
</div>
</div>
I think this is a bug of VeeValidate.
There is a workaround which has same effect as your desire: Validate on blur event
<div id="app">
<div v-for="user in users">
<div>Email: {{ user.email }}</div>
<input type="text" name="foo" v-model="user.email" v-validate="'email'" data-vv-validate-on="blur"/>
<span v-show="errors.has('foo')">{{ errors.first('foo') }}</span>
</div>
</div>
Demo https://jsfiddle.net/4zjf2ph3/
Trying to create a checkbox without using v-model
<input type="checkbox" :value="value" #change="$emit('input', $event.target.checked)" />
The checkbox will check and uncheck, and the input event is sent to the parent, but the value doesn't change. My parent component looks like this:
<custom-component v-model="some_boolean_value"></custom-component>
For checkboxes, use :checked instead of :value. See demo below.
Vue.component('custom-component', {
template: '#custom',
props: ['value']
})
new Vue({
el: '#app',
data: {
some_boolean_value: true
}
})
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>some_boolean_value: {{ some_boolean_value }}</p>
<custom-component v-model="some_boolean_value"></custom-component>
</div>
<template id="custom">
<div style="border: 2px dashed red;">
<input type="checkbox" :checked="value" #change="$emit('input', $event.target.checked)" />
</div>
</template>
How do I get bootstrap datetimepicker to pick date format as DD/MM/YY.Below is my code.Having referenced this SO answer. I created the following JSFiddle. As at now the result of the datepicker is like Fri Jan 12 2018 09:27:28 GMT+0300.
Below is the template code:
<div id="app" class="container">
<h3>Bootstrap Datetimepicker (eonosdan) Sample</h3>
<hr/>
<div class="row">
<div class="col-md-4">
<label>Select Date</label>
<vue-datetimepicker></vue-datetimepicker>
</div>
</div>
</div>
<template id="dttemplate">
<div class='input-group date'>
<input type='text' v-model="value" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>{{value}}
</div>
</template>
The JS component is as below:
Vue.component('vue-datetimepicker', {
template: '#dttemplate',
props: ['value'],
mounted: function() {
var vm = this
var mycomp = $(this.$el).datetimepicker({format: 'DD-MM-YYYY'})
mycomp.on('dp.change', function(e) {
vm.value = e;
app.$data.requestdate = e.date.format('DD-MM-YYYY');
vm.$emit('change', vm.value)
})
}
});
new Vue({
el: '#app',
data: {},
methods: {requestdate:moment().format('DD-MM-YYYY')}
})
<div class="form-group">
<date-picker v-model="requestdate"></date-picker>
</div>
Taking out the props: ['value'] from the component and v-model="value" results in datetimepicker being properly formatted.But well that renders it useless in terms of reusability.
Edit: After updating my code to the above it 'sort of works' but it renders the component only useful for a single datetimepicker.