I want to generate an event when I move to the next month or to the previous month.
I'd really appreciate your help.
Is there an event that can use this function?
Here's my code.
<v-date-picker
v-if="reservList[0].dates.length>0"
is-expanded
locale="ko"
color="indigo"
class="date-picker"
:model-config="{
type: 'string',
mask: 'YYYY-MM-DD',
}"
:masks="{ L: 'YYYY.MM.DD',title: 'YYYY년 MM월' }"
mode="date"
v-model="pickDate"
:attributes="reservList"
:reactive="true"
#change:month="changeMonth"
>
</v-date-picker>
<script>
export default{
setup(){
//none action
function monthChange(e){
console.log('test',e);
}
return{
monthChange
}
}
}
</script>
https://vcalendar.io/api/v2.0/datepicker.html
I tried the API of the site, but there was no clear result.
The event you are looking for is #update:from-page.
It sends a page object as parameter.
Example:
<template>
<v-date-picker update:from-page="changeMonth">
</template>
<script setup>
function changeMonth(page) {
console.log(`Moved to ${page.month} (${page.monthLabel}) month.`)
}
</script>
Related
How can I listen on onChange for the v-Calendar when change months/years is changed?
V-model only givers me the selected date if I change the date.
<v-date-picker
mode="single"
v-model="date"
color="red"
is-inline
/>
<div> {{ date }} </div>
I had the same problem trying to trigger some action when the value of the v-Calendar component was changing, and #change was not triggering anything.
I resorted using watch in my component script:
<script>
export default {
data() {
return {
date: {}
}
},
watch: {
date: function() {
// do what you want here
}
}
}
</script>
I am getting the following - Cannot read property 'free' of undefined.
I will be adding this button component on multiple pages and I have data object which will allow me to add text based on whatever page I want displayed on a page. For example if its on the homepage I would like to use <buttons :text="buttonText.free" /> and on about us page I would like to use <buttons :text="buttonText.spend" />
Template file
<template>
<main class="container">
<buttons :text="buttonText.free" />
</main>
</template>
<script>
import Buttons from '~/components/atoms/buttons.vue'
export default {
components: {
Buttons
}
}
</script>
Component file
<template>
<div>
<button class="button"">
<span>{{ buttonText }}</span>
</button>
</div>
</template>
<script>
export default {
props: {
text: String
},
data () {
return {
buttonText: {
free: 'free',
spend: 'spend',
now: 'now',
nowFree: 'now free'
}
}
}
}
</script>
Could you tell me what I am doing wrong?
You should define your data in your parent component's data property. All the variables that is used inside the template tag will be fetched from data, computed or props of the component. You are passing an undefined buttonText data to your buttons component.
<template>
<main class="container">
<buttons :text="buttonText.free" />
</main>
</template>
<script>
import Buttons from '~/components/atoms/buttons.vue'
export default {
data() {
return {
buttonText: {
free: 'free',
spend: 'spend',
now: 'now',
nowFree: 'now free'
}
}
},
components: {
Buttons
}
}
</script>
and in your buttons component, just accept the props passed by the parent component. In this case, you are using text as the props of the buttons component.
<template>
<div>
<button class="button"">
<span>{{ text }}</span>
</button>
</div>
</template>
<script>
export default {
props: {
text: String
}
}
</script>
template.vue
<template>
<main class="container">
<buttons :text="your customized text" />
</main>
</template>
<script>
import Buttons from '~/components/atoms/buttons.vue'
export default {
components: {
Buttons
}
}
</script>
buttons.vue
<template>
<div>
<button class="button">
<span>{{ text }}</span>
</button>
</div>
</template>
<script>
export default {
props: {
text: String
}
}
</script>
here is a simple solution to solve your problem
but you need to learn more fundamentals on vue components
vue component doc
I am trying to use a child compontent in another compontent and it does not work. I have been trying to solve this problem looking for typos etc. for hours, but can't find anything.
Menu.vue
<template>
<div class='navbar-and-alert'>
<alert/>
<nav class='navbar'>
</nav>
</div>
</template>
<script>
import Alert from './Alert.vue'
export default {
name: 'Navbar',
compontents: {
Alert
},
data (){
return {
}
},
}
</script>
Alert.vue
<template>
<section class='alert-section'>
<p class='alert-section__content'>
...
</p>
<a href=''><img src='/static/assets/img/close.svg' class='alert-section__close-icon'></a>
</section>
</template>
<script>
export default {
name: 'Alert',
}
</script>
I get this alert in console:
Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
The alert component works when used inside App.vue
components has a typo:
compontents: {
Alert
},
Should be:
components: {
Alert
},
I am starting with vue.js, the code below is fine, the idea is when a person clicks in detail, I send it to another component to see the detail of the user this is fine, what I need is when the user clicks on it link back inside the detail component, keep the currentPage variable, what it does is set the currentPage variable to 1
I found something called keepAlive, but I really don't know how it works.
Also some way for mounted to run once.
this is my view here i call the Users component
<template>
<div>
<h1>Lista de Usuarios</h1>
<Users/>
</div>
</template>
<script>
import Users from "#/components/Users.vue";
export default {
name:"Usuarios",
components:{
Users
}
};
</script>
Users component
<template>
<div id="ejemplo">
<b-table
id="tabla"
:items="usuarios"
:per-page="perPage"
:current-page="currentPage"
:fields="fields"
small
>
<template v-slot:cell(Detalle)="fila">
<b-link :to="{ name: 'Usuario', params: { id:fila.item.id} }">Ver Más</b-link>
</template>
<template v-slot:cell(Elimina)="fila">
<b-button size="sm" #click="elimina(fila.item.id)" class="mr-2">
Elimina</b-button >
</template>
</b-table>
<b-pagination
v-model="currentPage"
:total-rows="total"
:per-page="perPage"
aria-controls="tabla"
></b-pagination>
</div>
</template>
<script>
export default {
name:"Users",
data(){
return{
perPage: 3,
currentPage: 1,
usuarios:[],
fields: ['id', 'name', 'Detalle','Elimina'],
total:0,
}
},
methods:{
async Listar(){
let response = await fetch('https://jsonplaceholder.typicode.com/users')
let data= await response.json()
this.usuarios= await data
this.total= await this.rows()
},
rows() {
return this.usuarios.length
},
elimina(id){
this.usuarios=this.usuarios.filter(usuario=>usuario.id !== id)
}
},
mounted(){
this.Listar()
}
}
</script>
Maybe in your case it makes sense to use Vuex. Vuex is something like a a globally store for your Vue-Application. You could set the "currentPage"-Variable in there and change it's value by using "mutations".
I have a vue-multiselect component in a form, and the console reports that my options are undefined, even though I can see they are not. My options are fetched from a back end and put in the store well before this component is created.
The console error is
Invalid prop: type check failed for prop "options". Expected Array, got Undefined
Here is my component
<template>
<form action="#" #submit.prevent>
<section>
<div class="container">
<h2 class="subtitle">Details</h2>
<b-field label="Role" horizontal>
<multiselect
:options="roleOptions"
track-by="id"
label="title"
:multiple="true"
:close-on-select="false"
:clear-on-select="false"
></multiselect>
</b-field>
</div>
</section>
</form>
</template>
<script>
import Multiselect from "vue-multiselect";
import { mapState, mapActions } from "vuex";
export default {
name: "ProcessDetailsComponent",
components: {
multiselect: Multiselect
},
computed: {
roleOptions() {
return this.$store.state.processes.formData.process_roles;
}
},
};
</script>
<style scoped>
</style>
In the developer tools Vue inspector, I can see that the options look correct (to me). I've tried passing them in as props, computed values, mapped state - same problem every time.
If I swap the options out for a static array, defined in the data() function, it works ok. Can anyone confirm that I am implementing this correctly?
:options="roleOptions" expects an array. Make sure the vue variable is an array and not an object or undefined etc as mentioned above.
data(){
return{
roleOptions:[],
}
}