cant get multiple methods in vuejs instance to work - vue.js

I have two v-on:click events attached to html elements. the one calling method1 works but the other one doesnt work. i cant imagine what the issue is. i have no errors in the console
heres the the entire html page.
<div class="col-md-10" id="deckBuilder">
<button class="ClassTabs" id="classCardsTab">"#ViewData["ClassChoice"]"</button>
<button class="ClassTabs" id="neutralCardsTab">Neutral</button>
<div class="well col-md-9" id="classCards">
#foreach (var card in Model.ClassCards)
{
<img v-on:click="addCard" class="card" id="#card.CardID;#card.Name" style="width:200px;height:260px;" src="#Url.Content(card.Image)" alt="#card.Name" />
}
</div>
<div class="well col-md-3" id="tableWrapper">
<table id="deckTable">
<tr>
<th colspan="3" style="font-size:24px;"><input style="text-align:center;" placeholder="My #ViewData["ClassChoice"] Deck" v-model="deckName" /></th>
</tr>
<tr>
<th style="text-align:center;font-size:20px;">Name</th>
<th style="text-align:center;font-size:20px;">Count</th>
<th></th>
</tr>
</table>
</div>
<div class="well col-md-9" id="neutralCards">
#foreach (var item in Model.NeutralCards)
{
<img v-on:click="addCard" class="card" id="#item.CardID;#item.Name" style="width:200px;height:260px;" src="#Url.Content(item.Image)" alt="#item.Name" />
}
</div>
</div>
#section Scripts {
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var deckBuilder = new Vue({
el: '#deckBuilder',
data: {
deckList: [],
deckCards: 0,
deckName: ''
},
methods: {
addCard: function(event) {
var count = 0;
var foundCard = false;
var cardInfo = event.path[0].id.split(';');
var cardId = cardInfo[0];
var cardName = cardInfo[1];
var deckTable = document.getElementById('deckTable');
var row;
for (var i = 0; i < this.deckList.length; i++) {
if (this.deckList[i].id === cardId && this.deckList[i].count < 3 && this.deckCards < 30) {
this.deckList[i].count++;
foundCard = true;
this.deckCards++;
for (var x = 0; x < deckTable.rows.length; x++) {
if (deckTable.rows[x].id === cardId) {
deckTable.rows[x].cells[1].innerHTML = this.deckList[i].count;
break;
}
}
break;
} else if (this.deckList[i].id === cardId && this.deckList[i].count === 3 && this.deckCards < 30) {
alert('Deck limit reached for this card.');
foundCard = true;
break;
}
}
if ((this.deckList.length === 0 || !foundCard) && this.deckCards < 30) {
this.deckList.push({ id: cardId, count: 1 });
this.deckCards++;
row = deckTable.insertRow(-1);
row.insertCell(0).innerHTML = '<a class="cardLink" href="#Url.Action("Details", "Cards")/' + cardId + '" >' + cardName + '</a>';
row.insertCell(1).innerHTML = 1;
row.insertCell(2).innerHTML = '<button v-on:click="removeCard">X</button>';
row.id = cardId;
}
console.log(this.deckCards);
},
removeCard: function (event) {
console.log("remove card");
}
}
})
</script>
}

You could try writing it like this:
var vueInstanct = new Vue({
el: "#myVueInstance",
methods: {
method1() {
console.log('method1 hit');
},
method2() {
console.log('method2 hit');
}
}
})
But there doesn't seem to be anything wrong with your code... maybe post the html elements these methods are attached to? Could be something there.

Related

Sorting a vue 3 v-for table composition api

I have successfully created a table of my array of objects using the code below:
<div class="table-responsive">
<table ref="tbl" border="1" class="table">
<thead>
<tr>
<th scope="col" #click="orderby('b.property')">Property</th>
<th scope="col"> Price </th>
<th scope="col"> Checkin Date </th>
<th scope="col"> Checkout Date </th>
<th scope="col" > Beds </th>
</tr>
</thead>
<tbody>
<tr scope="row" class="table-bordered table-striped" v-for="(b, index) in properties" :key="index">
<td> {{b.property}} </td>
<td> {{b.pricePerNight}}</td>
<td> {{b.bookingStartDate}} </td>
<td> {{b.bookingEndDate}} <br> {{b.differenceInDays}} night(s) </td>
<td> {{b.beds}} </td>
</tr>
</tbody>
</table>
</div>
<script>
import {ref} from "vue";
import { projectDatabase, projectAuth, projectFunctions} from '../../firebase/config'
import ImagePreview from "../../components/ImagePreview.vue"
export default {
components: {
ImagePreview
},
setup() {
const properties = ref([]);
//reference from firebase for confirmed bookings
const Ref = projectDatabase .ref("aref").child("Accepted Bookings");
Ref.on("value", (snapshot) => {
properties.value = snapshot.val();
});
//sort table columns
const orderby = (so) =>{
desc.value = (sortKey.value == so)
sortKey.value = so
}
return {
properties,
orderby
};
},
};
</script>
Is there a way to have each column sortable alphabetically (or numerically for the numbers or dates)? I tried a simple #click function that would sort by property but that didn't work
you can create a computed property and return the sorted array.
It's just a quick demo, to give you an example.
Vue.createApp({
data() {
return {
headers: ['name', 'price'],
properties: [
{
name: 'one',
price: 21
},
{
name: 'two',
price: 3
},
{
name: 'three',
price: 5
},
{
name: 'four',
price: 120
}
],
sortDirection: 1,
sortBy: 'name'
}
},
computed: {
sortedProperties() {
const type = this.sortBy === 'name' ? 'String' : 'Number'
const direction = this.sortDirection
const head = this.sortBy
// here is the magic
return this.properties.sort(this.sortMethods(type, head, direction))
}
},
methods: {
sort(head) {
this.sortBy = head
this.sortDirection *= -1
},
sortMethods(type, head, direction) {
switch (type) {
case 'String': {
return direction === 1 ?
(a, b) => b[head] > a[head] ? -1 : a[head] > b[head] ? 1 : 0 :
(a, b) => a[head] > b[head] ? -1 : b[head] > a[head] ? 1 : 0
}
case 'Number': {
return direction === 1 ?
(a, b) => Number(b[head]) - Number(a[head]) :
(a, b) => Number(a[head]) - Number(b[head])
}
}
}
}
}).mount('#app')
th {
cursor: pointer;
}
<script src="https://unpkg.com/vue#next"></script>
<div id="app">
<table>
<thead>
<tr>
<th v-for="head in headers" #click="sort(head)">
{{ head }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(data, i) in sortedProperties" :key="data.id">
<td v-for="(head, idx) in headers" :key="head.id">
{{ data[head] }}
</td>
</tr>
</tbody>
</table>
</div>
For any one else who is stuck this is how i solved the problem from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sort_table_desc:
//sort table columns
const sortTable = (n) =>{
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable");
switching = true;
//Set the sorting direction to ascending:
dir = "asc";
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.rows;
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 1; i < (rows.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
/*check if the two rows should switch place,
based on the direction, asc or desc:*/
if (dir == "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
//Each time a switch is done, increase this count by 1:
switchcount ++;
} else {
/*If no switching has been done AND the direction is "asc",
set the direction to "desc" and run the while loop again.*/
if (switchcount == 0 && dir == "asc") {
dir = "desc";
switching = true;
}
}
}
}

VUEX Filtered computed property does not update at state change

I am using vuex , and with getters Iam filtering a array of data in the store.
In a parent component I am fetching the array and send it to a child with props.
The child component resieve filtered array with getters and save it in computed property.
But when I make changes by calling actions, store is updated but filtered array stayed the same.
When I send to the child component original unfiltered array it's okey.
It the vue dev tool I see correct updated getters.
Some of the code is below.
STORE
const getDefaultState = () => {
return {
activities: [],
error: null,
isActivitiesLoading: false,
isActivityUpdating: false,
}
}
const mutations = {
[FETCHING_ACTIVITIES](state) {
state.isActivitiesLoading = true;
state.error = null;
},
[FETCHING_ACTIVITIES_SUCCESS](state, activities) {
state.error = null;
state.isActivitiesLoading = false;
state.activities = activities
},
[FETCHING_ACTIVITIES_ERROR](state, error) {
state.error = error;
state.isActivitiesLoading = false
},
[UPDATING_ACTIVITY](state) {
state.isActivityUpdating = true;
state.error = null;
},
[UPDATING_ACTIVITY_SUCCESS](state, activity) {
state.error = null;
state.isActivityUpdating = false;
const index = state.activities.findIndex(a => a.id === activity.id)
state.activities[index] = activity;
},
[UPDATING_ACTIVITY_ERROR](state, error) {
state.error = error;
state.isActivityUpdating = false
},
}
const actions = {
async fetchActivities({ commit }) {
commit(FETCHING_ACTIVITIES);
try {
const response = await ActivitiesApi.fetchActivities();
const activities = response.data.data;
commit(FETCHING_ACTIVITIES_SUCCESS, activities);
return response.data.data;
} catch (error) {
commit(FETCHING_ACTIVITIES_ERROR, error);
return null;
}
},
async updateActivity({ commit }, payload) {
commit(UPDATING_ACTIVITY);
try {
const response = await ActivitiesApi.updateActivity(payload);
const activity = response.data.data;
commit(UPDATING_ACTIVITY_SUCCESS, activity);
return response.data.data;
} catch (error) {
commit(UPDATING_ACTIVITY_ERROR, error);
return null;
}
},
};
const getters = {
getActivities(state) {
return state.activities;
},
getRunningActivities(state) {
let today = new Date();
const activities = state.activities;
const filteredActivities = activities.filter(function(activity) {
let activityDate = new Date(activity.start_date)
return activityDate <= today
});
return filteredActivities;
},
};
export default {
namespaced: true,
state: getDefaultState(),
getters,
actions,
mutations,
}
PARENT COMPONENT
<template>
<div class="container">
<h3>Running Activities</h3>
<ActivitiesComponent
:initialActivitiesFromStore="runningActivities"
/>
</div>
</template>
import ActivitiesComponent from "../components/Activities";
export default {
components: {
ActivitiesComponent
},
mounted() {
this.$store.dispatch('activities/fetchActivities').then(
() => {
if (this.hasError) {
console.log(this.error)
} else {
}
}
);
},
computed: {
activitiesFromStore() {
return this.$store.getters['activities/getActivities'];
},
runningActivities() {
return this.$store.getters['activities/getRunningActivities']
},
},
}
</script>
CHILD COMPONENT
<template>
<div class="container">
<div v-if="isActivitiesLoading" class="spinner-border spinner"></div>
<div class="row">
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Activities</th>
<th scope="col">Period</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr v-for="(activity, activityId) in $v.activities.$each.$iter" :key="activityId">
<th scope="row">{{ parseInt(activityId) + 1 }}</th>
<td>
<input type="text" class="form-control" v-model="activity.name.$model">
<div class="alert alert-danger" v-if="!activity.name.required">Print Name</div>
<div v-if="activitiesFromStore[activityId].is_paused" class="alert alert-warning">
Activity is paused
</div>
</td>
<td>
<input type="text" class="form-control" v-model="activity.activity_period.$model">
<div class="alert alert-danger" v-if="!activity.activity_period.required">Print period</div>
<div class="alert alert-danger" v-if="!activity.activity_period.integer || !activity.activity_period.minValue">Period > 0</div>
</td>
<td class="d-flex border-0">
<button #click="activity.$model.is_paused = ! activity.$model.is_paused" class="btn btn-light mr-1" v-bind:class="{ active: !activity.$model.is_paused }">
<span v-if="activity.$model.is_paused">Убрать с паузы</span>
<span v-else>Make pause</span>
</button>
<button #click="updateActivity(activity.$model)" :disabled="
isActivityUpdating || !activitiesChanged(activityId) || !activity.name.required || !activity.activity_period.required || !activity.activity_period.integer || !activity.activity_period.minValue
" type="button" class="btn btn-success mr-1">
<span v-if="isActivityUpdating && activityActed.id == activity.$model.id" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Change
</button>
<button #click="deleteActivity(activity.$model)" type="button" class="btn btn-danger">
<span v-if="isActivityDeleting && activityActed.id == activity.$model.id" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Delete
</button>
</td>
</tr>
</tbody>
</table>
<div class="collapse" id="collapseExample">
<div class="form-group row">
<div class="col-4">
<label for="newPassword-input">Name</label>
<input v-model="activityToAdd.name" class="form-control">
<div v-if="$v.activityToAdd.period.$dirty && !$v.activityToAdd.name.required" class="alert alert-danger">Print name</div>
</div>
<div class="col-4">
<label for="newPassword-input">Period</label>
<input v-model="activityToAdd.period" class="form-control">
<div class="alert alert-danger" v-if="$v.activityToAdd.period.$dirty && !$v.activityToAdd.period.required">Print period</div>
<div class="alert alert-danger" v-if="(!$v.activityToAdd.period.integer || !$v.activityToAdd.period.minValue)">period > 0</div>
</div>
</div>
<button #click="addActivity" :disabled="!$v.activityToAdd.name.required || !$v.activityToAdd.period.required || !$v.activityToAdd.period.integer || !$v.activityToAdd.period.minValue" type="button" class="btn btn-primary">
<span v-if="isActivityAdding" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
add
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import {required, minValue, integer} from "vuelidate/lib/validators"
export default {
props: ['initialActivitiesFromStore'],
data() {
return {
activityActed: null,
justEdited: false,
justAdded: false,
justDeleted: false,
activityToAdd:{
name: '',
period: '',
isPaused: ''
}
}
},
computed: {
activitiesFromStore() {
return this.initialActivitiesFromStore
},
activities() {
return JSON.parse(JSON.stringify(this.initialActivitiesFromStore));
},
},
methods: {
activitiesChanged(id) {
if(this.activitiesFromStore[id] && this.activities[id].name == this.activitiesFromStore[id].name && this.activities[id].activity_period == this.activitiesFromStore[id].activity_period && this.activities[id].is_paused == this.activitiesFromStore[id].is_paused)
return false;
else
return true
},
updateActivity(activity){
this.activityActed = activity;
this.$store.dispatch('activities/updateActivity', activity).then(
() => {
if (this.hasError) {
console.log(this.error)
} else {
this.justEdited = true;
// still the same
console.log(this.$store.getters['activities/getRunningActivities']);
}
}
);
},
},
validations: {
activities: {
$each: {
name: {
required,
},
activity_period: {
required,
integer,
minValue: minValue(0)
},
is_paused: {
required,
},
}
},
}
}
</script>
The problem was that I did not follow the vue specification about modification of an array. I used vm.items[indexOfItem] = newValue which is not reactive.

Form collection validation with dates and string - Vuelidate

I am trying to validate series of dates with something like this.
const data = [
{begin: new Date('2019-12-01'), place: '2'},
{begin: new Date('2019-12-03'), place: '3'}
... more values
];
// Elements inside data can be added or removed but will have at least one.
Here data[1][begin] should be more than or equal to data[0][begin] and data[1][place] should not equal to data[0][place]. Is there anyway to achieve this. Documentation talks about dynamic validation but I am not sure how I can achieve this with collection.
You can consider implementing a custom validation in the form submit event listener.
This can be achieved by looping through your array of objects and compare items in pairs.
HTML
<form
id="app"
#submit="checkForm"
action="/someurl"
method="post"
>
<table border="1">
<tr v-for="(item,index) in dates" :key="index">
<td>
{{index}}
</td>
<td>
{{formatDate(item.begin)}}
</td>
<td>
{{item.place}}
</td>
</tr>
</table>
<input type="date" v-model="dateEntry"/>
<input type="text" v-model="placeEntry"/>
<button type="button" #click="addEntry">Add</button>
<p>
<br>
<input
type="submit"
value="Submit"
>
</p>
<p v-for="error in errorList">
{{error}}
</p>
</form>
JS
new Vue({
el: "#app",
data: {
errorList: [],
dateEntry: null,
placeEntry: null,
dates: [
{begin: new Date('2019-12-01'), place: '2'},
{begin: new Date('2019-12-03'), place: '3'}
]
},
methods: {
addEntry: function(){
if(this.dateEntry == null || this.dateEntry == "")
return false;
if(this.placeEntry == "")
return false;
this.dates.push({
begin: new Date(this.dateEntry),
place: this.placeEntry
});
this.dateEntry = null;
this.placeEntry= "";
},
checkForm: function(e){
var isValid = true;
var index = 0;
var nextIndex = 1;
this.errorList = [];
while(nextIndex < this.dates.length){
if(nextIndex < this.dates.length){
var isValidDate = this.validDate(this.dates[nextIndex].begin,this.dates[index].begin);
var isValidPlace = this.validPlace(this.dates[nextIndex].place,this.dates[index].place);
if(!isValidDate){
this.errorList.push("Invalid date on index " + nextIndex);
}
if(!isValidPlace){
this.errorList.push("Invalid place on index " + nextIndex);
}
}
index++;
nextIndex++;
}
if(!this.errorList.length){
this.errorList.push("All dates are valid");
return true;
}
e.preventDefault();
},
formatDate: function(date){
return date.toDateString();
},
validPlace: function(curPlace, prevPlace){
return curPlace != prevPlace;
},
validDate: function(curDate,prevDate){
try{
return curDate.getTime() >= prevDate.getTime();
}catch(e){
return false;
}
}
}
})
Check out this JS Fiddle that I created to illustrate my suggestion.
On the other hand, if you are building the array during runtime, then you can apply the validation before it gets added into the array.

Date range inside loop of multiple datatable in the same page

I came from the issue [https://datatables.net/forums/discussion/51949/looping-multiple-datatables-on-the-same-page#latest] and found an issue that comes from filtering of dates: if I filter and on change of this date range, it triggers table.draw() for the first one if it is inside of the loop of multiple datatable in the same page
My intention is to have the data range to work on each datatable individually
Here is a sample of what I already done
http://live.datatables.net/magokusa/4/edit
HTML
<div class="container">
<h3>Table 1</h3>
<div class="input-group input-group-sm">
<input type="date" id="dateFromupper" placeholder="Date from" value="2017-04-10">
<div>
<div>to</div>
</div>
<input type="date" id="dateToupper" placeholder="Date to" value="2018-09-10">
</div>
<table id="upper" data-action="https://demo.wp-api.org/wp-json/wp/v2/posts?per_page=5" class="display nowrap datatable" width="100%">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
</table>
<hr>
<h3>Table 2</h3>
<div class="input-group input-group-sm">
<input type="date" id="dateFromlower" placeholder="Date from" value="2016-04-10">
<div>
<div>to</div>
</div>
<input type="date" id="dateTolower" placeholder="Date to" value="2018-09-12">
</div>
<table id="lower" data-action="https://css-tricks.com/wp-json/wp/v2/posts?per_page=5" class="display nowrap datatable" width="100%">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
</tr>
</thead>
</table>
</div>
JS
$(document).ready( function () {
$.each($('.datatable'), function () {
var dt_id = $(this).attr('id');
var dt_action = $(this).data('action');
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var min = $("#dateFrom" + dt_id).val();
var max = $("#dateTo" + dt_id).val();
if (min != null && max != null) {
min = new Date(min);
max = new Date(max);
var startDate = new Date(data[1]);
if (min == null && max == null) {
return true;
}
if (min == null && startDate <= max) {
return true;
}
if (max == null && startDate >= min) {
return true;
}
if (startDate <= max && startDate >= min) {
return true;
}
} else {
return true;
}
}
);
$("#dateFrom" + dt_id + ", #dateTo" + dt_id).change(function () {
table.draw();
});
if (dt_action != null) {
var dt_ajax = dt_action;
var table = $('#' + dt_id).DataTable({
ajax: {
"url": dt_ajax,
"dataSrc": ""
},
columns: [
{ "data": "status" },
{ "data": "date" },
{ "data": "date_gmt" },
]
});
} else {
var table = $('.datatable').DataTable({
retrieve: true,
responsive: true,
});
}
});
});
Since you already are declaring two different filters, you can just check if the current draw process is related to the filter itself :
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
if (settings.sInstance != dt_id) return true
...
}
)

How to get data from all selected rows in datatable?

I have a simple table :
<div class="col-md-12 top-buffer">
<table id="table-data" class="table table-striped table-bordered">
<thead>
<tr>
<th></th>
<th>Code</th>
<th>Name</th>
<th>Postal Code</th>
<th>City</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
I implemented the selection of multiple rows using this :
var rows_data = [];
$(document).ready(function () {
$('#table-data tbody').on('click', 'input[type="checkbox"]', function(e) {
var $row = $(this).closest('tr');
if(this.checked){
$row.addClass('selected');
} else {
$row.removeClass('selected');
}
e.stopPropagation();
});
$('#table-data').on('click', 'tbody td, thead th:first-child', function(e) {
$(this).parent().find('input[type="checkbox"]').trigger('click');
});
}
What I'd like to do is add/remove the data of a row in rows_data[] when I select/deselect one.
How should I do to access the data (and also the index) of a row ?
Thanks !
Well I found something quite simple, here it is :
var rows_selected = [];
var table = $('#table-data').DataTable();
$(document).ready(function () {
$('#table-data tbody').on('click', 'input[type="checkbox"]', function(e) {
var $row = $(this).closest('tr');
var data = table.row($row).data();
var key = data[1];
if(this.checked){
$row.addClass('selected');
rows_selected[key] = data;
} else {
$row.removeClass('selected');
delete rows_selected[key];
}
e.stopPropagation();
});
}
Alternatively, you can clear and rebuild your rows_data array with a little less code:
var rows_data = [];
$(function() {
var table = $('#table-data').DataTable();
$('#table-data tbody').on('click', 'input[type="checkbox"]', function(e) {
var $row = $(this).closest('tr');
if (this.checked) {
$row.addClass('selected');
} else {
$row.removeClass('selected');
}
rows_data = [];
$('#table-data tr.selected').each(function() {
rows_data.push(table.row($(this)).data());
});
e.stopPropagation();
});
$('#table-data').on('click', 'tbody td, thead th:first-child', function(e) {
$(this).parent().find('input[type="checkbox"]').trigger('click');
});
});