I used VUEJS2 Datepicker and I want to call a function from methods but is not working. The console is clear, without errors. If I call the function on another div/element everything is working fine.
How can I call the function when I clicked on the specific element.
Used datepicker
TAG
<date-picker #click="checkRef" class="customDateInput" format="DD-MM-YYYY" v-model="dataStare"></date-picker>
Function
methods: {
checkRef () {
const input = this.$el.querySelector('.customDateInput > .mx-input-wrapper > .mx-input')
input.setAttribute("inputmode", "none")
console.log(this.$el.querySelector('.asd > .mx-input-wrapper > .mx-input'))
}
}
For the vue2-datepicker, you need to use their available events to call your method. If you want it called whenever a date is selected, then you would add
<date-picker #pick="checkRef" class="customDateInput" format="DD-MM-YYYY" v-model="dataStare">
Related
I'm learning nuxt and the tutor has a function to add an item called updateTodo and attached it to a button as the follwoing
script
<script setup>
const updateTodo = async (id) => {
if (!input) return;
await $fetch(`/api/todo/${id}`, { method: 'PUT' });
};
</script>
template
<template>
<div class="container">
<input type="text" placeholder="Add a new todo..." v-model="input" />
<NButton #click="() => updateTodo(todo.id)">Add</NButton>
</div>
</template>
I dont know why he didn't call it directly (eg. #click="updateTodo(todo.id)). I tried to do it and it worked. Is there a reason i dont know or it's just a preference?
Both are allowed.
https://vuejs.org/guide/essentials/event-handling.html#listening-to-events
The usage would be v-on:click="handler" or with the shortcut, #click="handler". The handler value can be one of the following:
Inline handlers: Inline JavaScript to be executed when the event is triggered (similar to the native onclick attribute).
Method handlers: A property name or path that points to a method defined on the component.
However, note that this isn't necessarily always the case. In some libraries/frameworks, something like onclick="yourFunction()" might call the method immediately, and use the returned value as an event listener. This is usually not what you want, unless you're returning a function.
in this case you call directly, you don't require event parmas here.
<NButton #click="updateTodo(todo.id)">Add</NButton>
but in a certain case, you need event parament to get the value of the input (e.target.value) or want to prevent the default of that event(e.preventDefault) i.e
a. you call anyFunction in each time, then
<input #input="anyFunction">
b. but you want to pass function if enter value is greater than 100 or anything else then you need to pass as function so you get event as params like
<input #input="(e) => e.target.value > 100 && anyFunction">
In other words, if there is no argument in the function for the particular event then you don't need to pass the function. else you need to pass the function.
I have a web page that displays a Vuetify date-picker component.
When the page is loaded or when the month is changed, I make an AJAX call that runs an SQL query to return the dates in that specific month when a particular event occurred.
Then, I only want to make these specific dates clickable.
As per the Vuetify documentation, the allowed-dates attribute allows you to do this.
After some experimentation, I have come across some unexpected difficulty:
The allowed-dates attribute takes in a function instead of, for example, an array. So, I had to create a function that will consult an "allowed dates" array that is returned by my AJAX call
Furthermore, the function is called when the date-picker is rendered and NOT when the AJAX call returns, so I end up with no dates being activated or only one date being activated on only the last date of the month being activated.
Am I missing something? is the allowed-dates attribute not responsive? I would prefer to stick with Vuetify since I am using it for the rest of the UI, but I am willing to switch to something else if a solution cannot be found.
There's some confution when an example in docs says:
You can specify allowed dates using arrays, objects, and functions.
But in API allowed-dates consumes only functions.
I guess the answer is to correctly define allowedDates function.
You first need to create an empty reactive array, then assign data into it via AJAX call, and in allowedDates function you just be able to compare the displayed page of dates with the dates in the array.
So the code is...
<v-date-picker
v-model="date"
:allowed-dates="allowedDates"
/>
...
data: () => ({
date: '2022-01-11',
allowedDatesArray: [],
}),
mounted() {
this.getAllowedDates();
},
methods: {
allowedDates(val) {
return this.allowedDatesArray.includes(val);
},
async getAllowedDates() {
this.allowedDatesArray = [];
await //...your AJAX call that must assign allowedDatesArray
}
}
I created a sandbox at CodePen where you may test this solution with some static dates that loading asynchronously using Promise.
In your solution you need to replace Promise with your AJAX call.
Using a SyncFusion Vue Grid component, I need to call a function when a row is selected. I have tried adding a column of edit buttons but I can't find documentation for the correct syntax to use to get the buttons to call a function. I also tried looking for a way to just call a function whenever the row itself is clicked which would be fine as long as I can determine which row was clicked (access the value of one of the fields in the row). The Grid Selection API looks like it is just for programmatically selecting parts of the grid which is not what I am trying to do. I tried following this explanation but I could not figure out the syntax for getting the button to call a function. I have looked at the Vue and SyncFusion documentation but I can't find specifically what I am trying to do. Below are the relevant parts of the code.
<template>
<ejs-grid>
<e-columns>
<e-column
headerText='Buttons'
width='120'
:template='cTemplate'></e-column>
<e-column
field="name"
headerText="Name"
:isPrimaryKey="true"
width="60"
></e-column>
<e-column
field="generalSubject"
headerText="Subject"
width="40"
></e-column>
</e-columns>
</ejs-grid>
</template>
<script>
export default Vue.extend({
data() {
cTemplate: function () {
return { template : Vue.component('columnTemplate',{
template: `<button v-on:click="fx">Edit</button>`, // <-- call fx() syntax??
data: function() {
return {
data: {}
}
},
})}
},
fx: function() { // do something },
},
});
</script>
Your requirement can be achieved by using the Grid’s rowSelected event. This event gets triggered on selecting a Grid row and returns the current row details in the event arguments.
Please find the below sample prepared based on this for your reference,
Sample: https://codesandbox.io/s/vue-forked-0knlb?file=/src/App.vue
API link: https://ej2.syncfusion.com/vue/documentation/api/grid/#rowselected
Let us know if you need further assistance.
Regards,
Sujith R
I've created a calendar in Vue to track payments due. In payment.js, I have a function, calculatePayments(payment), that takes a payment record and determines what dates on the current calendar to show a payment. Inside this function is a call to a mixin function, formatPaymentDate(nextPmtDate). This function is in formats.js.
When initially creating the calendar in a component called CalendarGrid.vue, calculatePayments is called several times, which in turn calls formatPaymentDate. This works fine. CalendarGrid.vue has a sibling component, PaymentEntry.vue, in which a new payment record can be created. This component has a "Save" button which calls calculatePayments, which in turn calls formatPaymentDate. When the "Save" button is clicked, I get the following error message:
Error in v-on handler:
"TypeError: this.formatPaymentDate is not a function"
In PaymentEntry.Vue, I have the following import statement:
import { formats } from "../library/formats";
formats.js:
export const formats = {
methods: {
...
numericDate(date) {
return this.formatDate(date, "YYYY-MM-DD");
},
formatPaymentDate(date) {
return this.numericDate(date);
}
}
}
The pertinent code from payments.js:
calculatePayments: function (payment) {
let nextPmtDate = moment(payment.next);
payment.next = this.formatPaymentDate(nextPmtDate);
}
I tried moving the import {format} statement to payments.js. When I do, VSCode greys it out.
My problem was that I wasn't using a proper mixin format in my library
I'm currently implementing a classical Minesweeper game in Vue.js which is working fine so far https://github.com/franktopel/defuse, Demo http://connexo.de/defuse/.
Now I would like to add touch support because as of now, to mark a field as "contains a mine" it is required that you right-click the field. Right-clicking is obviously not available on touch devices, so I would like to add longtap support. I'm using native events click and click.right from the parent component for each field, so the field does not handle the events, but the parent component that instantiates these fields does.
I've found this https://github.com/jerrybendy/vue-touch-events and added it to my project, yet it seems I cannot use this on the component tag (see https://github.com/franktopel/defuse/blob/master/src/components/Defuse.vue):
<m-field
v-for="field in row"
:field="field"
:key="`${field.x},${field.y}`"
#click.native="open(field)"
#click.right.native.prevent="toggleBombMarker(field)"
v-touch:longtap="toggleBombMarker(field)"
></m-field>
because that marks all fields without any user interaction and the console keeps producing
You may have an infinite update loop in a component render function.
This is how my field objects (which I'm passing to the field component) are created:
let Field = function (x, y) {
this.x = x
this.y = y
this.isOpen = false
this.hasBomb = false
this.isMarked = false
this.numNeighbourBombs = null
}
module.exports = Field
I have also tried emitting a custom event from inside my field component, yet I don't know how I can pass the triggering field to the event handler from there.
Can anyone push me in the right direction?
According to the vue-touch-events docs, the v-touch directive doesn't work in the same way as v-on; v-touch must be given a function to execute, whereas the toggleBombMarker(field) expression probably returns undefined.
If you want to pass extra parameters to the v-touch handler, your handler must return a function like this:
methods: {
toggleBombMarker(field) {
return () => {
// your handler code here
}
}
}