We Keep Coding

How can we set a default value of a v-text-field of vuetify in nuxtjs?

I am new to vuejs and nuxtjs and at my company they are using vuetify. I need to set default value as 0 to v-text-field fields in the application but I cant find the to do so in the vuetify doc.

You can provide the default value 0 on the actual property bound to v-model from data object itself. <v-text-field> is just a wrapper around an html <input>. Hence, it will bind the data in same way how we are binding for input.
Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
textFieldValue: 0,
})
})
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-text-field v-model="textFieldValue"/>
</div>
</div>

You can use the v-model directive and just set the default value to 0 in your data property. Example: <v-text-field v-model="textField" label="My Text Field/> and in your data: data: () => ({ textField: 0, })
Hope it's the right answer, cheers

How to get bind date from Vue Material DatePicker?

Probably a basic question, but I'm just beginning to learn Vue/Javascript in general.
I have a basic DatePicker component DatePicker.vue:
<template>
<div>
<md-datepicker v-model="selectedDate">
<label>Select date</label>
</md-datepicker>
</div>
</template>
<script>
import Vue from "vue";
export default Vue.extend( {
name: "LabeledDatepicker",
data: () => ({
selectedDate: null,
}),
});
</script>
This component is used in a view like so:
<template>
<div class="date-picker">
<DatePicker />
</div>
</template>
In my script I have two properties called fromDate and toDate which I want to get from two datepickers in my component.
<script lang="ts">
import Vue from "vue";
import DatePicker from "./DatePicker.vue";
export default Vue.extend({
components: {
DatePicker,
},
data() {
return {
fromDate: null,
toDate: null,
};
How do I bind the values selected in the datepickers to fromDate and toDate so I can use them in my API requests? I have tried to use v-model="fromDate", but fromDate was still null even after I selected a date.

Your datepicker component needs to accept props if you want to both populate the value with existing values and update it from within the component. Alternatively, use "emit" from your datepicker component and then attach a method to handle change custom event in Vue.js

Getting selected vue value into data return

I'm currently using a vue datepicker which, when a date is selected, shows pickedValue as the value for the selected date in vue developer tools:
<div v-cloak v-if="isScheduledTask">
<datepicker value="" name="pickedValue" id="pickedValue" ></datepicker>
</div>
Trying to set the pickedValue to a variable in my data return (i need the picked value to be submitted with other data here) as a $ref is breaking the page. If I change this to just datepicker.pickedValue then it's undefined. What am I doing wrong here?
data() {
return {
pickedValue: this.$refs.datepicker.pickedValue
}
}

It's very bad pattern, but you have no choice working with library that does not emit ANY events.
DON'T DO IT EVER AGAIN!!!
<datepicker ref="datepicker" #click.native="method"></datepicker>
data() {
return {
value: ''
}
},
methods: {
method() {
this.value = this.$refs.datepicker.pickedValue
},
},

Try to use v-model directive to bind your datepicker to that data property pickedValue as follows :
<div v-cloak v-if="isScheduledTask">
<datepicker value="" name="pickedValue" v-model="pickedValue" ></datepicker>
</div>
script :
data() {
return {
pickedValue: ''
}
}

Vuelidate: setting $model does not update component

Given the following Vue component that uses Vuetify and Vuelidate:
<template>
<div id="app">
<v-date-picker v-model="$v.picker.$model"></v-date-picker>
</div>
</template>
<script>
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { required } from 'vuelidate/lib/validators'
Vue.use(Vuetify)
new Vue({
el: "#app",
data() {
return {
picker: new Date().toISOString().substr(0, 10)
};
},
validations: {
picker: {
required
}
}
});
</script>
I would like to programmatically change the value of this.picker. I tried both changing the v-model as well as the Vuelidate $model:
this.picker = new Date().toISOString().substr(0, 10)
and
this.$v.picker.$model = new Date().toISOString().substr(0, 10))
Neither of them caused a change in the UI nor produced an error message.
How can I programmatically update the DatePicker's value?

Try just assigning v-model to picker instead of $v.picker.$model.
You said you tried changing v-model, but this should work.
<v-date-picker v-model="picker"></v-date-picker>

How to get property value from component in vue.js 2.0?

I have this component:
<template>
<div class="animated fadeIn">
<div class="col-sm-6 col-lg-6">
<datepicker class="form-control" :value="config.state.fromDate" :disabled="config.disabledFrom"></datepicker>
</div>
<div class="col-sm-6 col-lg-6">
<datepicker :value="config.state.toDate" :disabled="config.disabledTo"></datepicker>
</div>
</div>
</template>
<script>
import Datepicker from 'vuejs-datepicker'
var d = new Date()
var year = d.getFullYear()
var month = d.getMonth()
var day = d.getDate()
var fromD = new Date(year - 1, month, day)
var toDD = new Date(year, month, day)
console.log(fromD.toString())
console.log(toDD)
export default {
data() {
return {
config: {
disabledFrom: {
to: fromD
},
disabledTo: {
from: toDD
},
state: {
fromDate: (d.getDate() - 1).toString(),
toDate: new Date(year, month, day).toString()
}
}
}
},
components: {
Datepicker
}
}
</script>
I import this component like so:
import picker from '../components/DateFilter'
In this vue I have a button that when clicked i want it to get a property from the component that I am importing:
<template>
<div class="animated fadeIn">
<picker></picker>
</div>
<div>
<button #click="onChange2" class="btn btn-primary">search</button>
</div>
</template>
the method has an alert to show me the value:
onChange2: function() {
alert(picker.datepicker.value)
}
error message:
Cannot read property 'value' of undefined
other attempts:
alert(picker.data.config.state.value)
alert(picker.config.state.value)
I am new to vue and I havent been able to figure out where I am doing this wrong.

It is techincally possible to access child properties by using this.$children (or this.$parent) but please dont! It will introduce coupling between your components which is bad, very bad.
Instead you should use props to pass data down to your children, and emit events up to your parents.
If this is the vue-datepicker you are using, here's one example to do what you want:
// childcomponent.vue
<template>
<div class="child-component">
<datepicker v-on:selected="doSomethingInParentComponentFunction"></datepicker>
</div>
</template>
<script>
import Datepicker from 'vuejs-datepicker'
export default {
components: {
Datepicker
},
methods: {
doSomethingInParentComponentFunction (selectedDate) {
this.$emit("selected", selectedDate)
}
}
}
</script>
And in parent:
// parentcomponent.vue
<template>
<div class="parent-component">
<child-component v-on:selected="dateSelectedInChild"></child-component>
</div>
</template>
<script>
import ChildComponent from 'childcomponent'
export default {
components: {
ChildComponent
},
methods: {
dateSelectedInChild (selectedDate) {
console.log(selectedDate)
}
}
}
</script>
You can read more about this on the links above, or on this article which summarize this and more.

picker is a component class, not an instance of a component. It doesn't have any properties you can access. Similarly, Datepicker (not datepicker, which is just the HTML tag form) is a component, not an instance.
You're thinking about Vue data backwards. You provide initial values to your datepickers, but you don't have them storing new values anywhere. You expect to be able to "look into" children to get values, but instead, you should be sending those values out of the children via events (read this).