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).
Related
Why is slot said to be no reactive?
https://v2.vuejs.org/v2/api/index.html#vm-slots
Following is the example, when i click component's button, the headerValue will add, if the slot is no reactive, then the component childern will not render, but actually it's opposite
<!-- component A -->
<template>
<div>
<header-slot>
<template slot="header">
<div>{{ headerValue }}</div>
</template>
</header-slot>
<button #click="changeProp">change</button>
</div>
</template>
<script>
import HeaderSlot from '#/views/headerSlot.vue'
export default {
components: {
HeaderSlot
},
data() {
return {
headerValue: 1
}
},
methods: {
changeProp() {
this.headerValue += 1
}
}
}
</script>
<template>
<!-- component children -->
<h1>
inner-text
<slot name="header" />
</h1>
</template>
The example you're referring to is using this snippet of code
Vue.component('blog-post', {
render: function (createElement) {
var header = this.$slots.header // 👈🏻 referring to that slot
var body = this.$slots.default
var footer = this.$slots.footer
return createElement('div', [
createElement('header', header),
createElement('main', body),
createElement('footer', footer)
])
}
})
aka using this.$slots.header in a render function is probably not reactive.
Of course, if you have a slot in place and you have some updates on a data or computed state, it will be reactive and update itself but here, the given point is about the vm.$slots (which is read only btw).
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
I am stuck at making a CheckBoxGroup with a prop array as v-model.
I have read the vuejs guide: https://v2.vuejs.org/v2/guide/forms.html#Checkbox which has the v-model array in the data of the same component, but it is obviously pretty useless if I want to make this component reusable and insert the v-model via props and for example check some of the boxes from "outside".
So I tried following:
CheckBoxgroup.vue
<template>
<div>
<label v-for="day in allDays" :key="day">
<input v-model="checkedDays" type="checkbox" :value="day" />
<span>{{ day }}</span>
</label>
<div>Checked days: {{ checkedDays }}</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
#Component
export default class CheckBoxGroup extends Vue {
#Prop() checkedDays!: string[]
#Prop() allDays!: string[]
}
</script>
Index.vue
<template>
<div>
<checkbox-group :checked-days="checkedDays" :all-days="allDays" />
</div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import CheckboxGroup from './checkBoxGroup.vue'
#Component({
components: { CheckboxGroup },
})
export default class Index extends Vue {
// This list would usually come from an API
allDays = ['Monday', 'Tuesday', 'Wednesday']
checkedDays = ['Monday']
}
</script>
So the code is working almost fine, but I am getting
[Vue warn]: Avoid mutating a prop directly since the value will be
overwritten whenever the parent component re-renders...
Is there any way around it? Any help would be appriciated.
you can't mutate the parent state from the children directly, however you can emit the event from child to parent to mutate from there as below:
Vue.component('check-box-group', {
template: `
<div>
<label v-for="day in allDays" :key="day">
<input
v-model="checkedDays"
:value="day"
#click="$emit('update-checked-days', { newCheckedDay: day })"
type="checkbox"
/>
<span>{{ day }}</span>
</label>
<div>Checked days: {{ checkedDays }}</div>
</div>
`,
props: {
checkedDays: {
type: Array, default: () => ([])
},
allDays: {
type: Array, default: () => ([])
},
}
})
new Vue({
el: "#app",
data() {
return {
allDays: ['Monday', 'Tuesday', 'Wednesday'],
checkedDays: ['Monday']
}
},
methods: {
HandleUpdateCheckedDays({newCheckedDay}) {
const indexOfCheckedDay = this.checkedDays.findIndex(checkedDay => checkedDay === newCheckedDay)
if (indexOfCheckedDay === -1) { // if not exists then add to checkedDays
this.checkedDays.push(newCheckedDay)
} else {
this.checkedDays = this.checkedDays.filter((_, i) => i !== indexOfCheckedDay)
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app">
<check-box-group
:checked-days="checkedDays"
:all-days="allDays"
#update-checked-days="HandleUpdateCheckedDays"
/>
</div>
note: remember that TS class composition is deprecated.
Thanks for the answer, I actually managed to solve it also with v-model, but it looks kind of hacky and not very reusable for cases if data is injected from the outside Models.
So I will go with your solution.
Question
In VueJS 2 how do you show some HTML if a Function prop was passed to the component.
Example
<template>
<div v-if="backBtn" #click="$emit('backBtn')">Back Button</div>
</template>
<script>
export default {
props: {
backBtn: Function
}
}
</script>
I can do this by passing a separate prop to key the v-if off of but I'm trying to do this will the one prop.
I created a Fiddle for this issue here
that should work,
you can add more definition with !== undefined
<template>
<div v-if="backBtn !== undefined" #click="$emit('backBtn')">Back Button</div>
</template>
<script>
export default {
props: {
backBtn: {
type: Function,
},
}
}
</script>
but as mentioned, that should work already, so you error may be somewhere else.
after seeing your code, I see what the issue is. it's a case issue
use :back-btn instead of :backBtn
this happens only if you're using vue runtime only (without the compilation)
read more here:
https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
you can solve it also by passing the function only
https://jsfiddle.net/rz6hyd7b/7/
Vue.component('my-btn', {
props: {
backbtn: {
type: Function
}
},
template: `
<div>
<div v-if="backbtn" #click="backbtn">Back Button</div>
</div>
`
})
var vm = new Vue({
el: '#app',
components: 'my-btn',
methods: {
btnClicked: function(){
console.log('adsf')
}
},
template: `
<div>
Show Btn => <my-btn :backbtn="btnClicked"></my-btn>
</br>
Hidden Btn => <my-btn></my-btn>
</div>
`
});
I have this component:
<template>
<div>
<label class="col-form-label">
<span>From</span>
</label>
<DatepickerFrom v-on:selected="SetSelectedDateFrom" :value="config.state.fromDate" :disabled="config.disabledFrom"></DatepickerFrom>
</div>
</template>
<script>
import DatepickerFrom from 'vuejs-datepicker'
const dUse = new Date()
export default {
data() {
return {
config: {
disabledFrom: {
to: new Date(dUse.getFullYear() - 1, dUse.getMonth(), dUse.getDate()),
from: new Date(dUse.getFullYear(), dUse.getMonth(), dUse.getDate())
},
state: {
fromDate: new Date(
dUse.getFullYear(),
dUse.getMonth(),
dUse.getDate() - 1
).toString()
}
}
}
},
methods: {
SetSelectedDateFrom: function(selectedDate) {
this.$emit('selected', selectedDate)
}
},
components: {
DatepickerFrom
}
}
</script>
note this part:
:value="config.state.fromDate"
I load this component:
<div class="card selector col-md-4 holder">
<pickerTo v-on:selected="DateSelector2" ></pickerTo>
</div>
import pickerTo from '../components/DateFilterTo'
i have a function that gets the selected value once the a change occurs:
DateSelector2: function(date) {
FromDate = date
}
Once a new date is picked i assign it to a global variable inside of my parent.
Problem:
I have a default date set in the component which I would like to get when I am making a request to the server. I cant figure out how to get this default value since it does not occur within the change event.
I am new to vue.
One of the easiest ways would be to emit the default value when the mounted function fires.
mounted () {
this.$emit('selected', config.state.fromDate)
}
Other than that I would mutate the value into a prop and alter it slightly to allow it to work with v-model so that the default value is passed from the parent using whichever method it chooses to derive that value.
EDIT:
Here's how I would refactor it to use a prop.
<template>
<div>
<label class="col-form-label">
<span>From</span>
</label>
<DatepickerFrom v-on:selected="SetSelectedDateFrom" :value="value" :disabled="config.disabledFrom"></DatepickerFrom>
</div>
</template>
<script>
import DatepickerFrom from 'vuejs-datepicker'
const dUse = new Date()
export default {
props: {
value: {
type: String,
required: true
}
},
data() {
return {
config: {
disabledFrom: {
to: new Date(dUse.getFullYear() - 1, dUse.getMonth(), dUse.getDate()),
from: new Date(dUse.getFullYear(), dUse.getMonth(), dUse.getDate())
},
state: {
}
}
}
},
methods: {
SetSelectedDateFrom: function(selectedDate) {
this.$emit('input', selectedDate)
}
},
components: {
DatepickerFrom
}
}
</script>
now you can use your component with the v-model directive for 2 way binding
<component v-model="dateFrom"></component>
...
data () {
return {
dateFrom: new Date(
dUse.getFullYear(),
dUse.getMonth(),
dUse.getDate() - 1
).toString()
}
}