link2466 link2467 link2468 link2469 link2470 link2471 link2472 link2473 link2474 link2475 link2476 link2477 link2478 link2479 link2480 link2481 link2482 link2483 link2484 link2485 link2486 link2487 link2488 link2489 link2490 link2491 link2492 link2493 link2494 link2495 link2496 link2497 link2498 link2499 link2500 link2501 link2502 link2503 link2504 link2505 link2506 link2507 link2508 link2509 link2510 link2511 link2512 link2513 link2514 link2515 link2516 link2517 link2518 link2519 link2520 link2521 link2522 link2523 link2524 link2525 link2526 link2527 link2528 link2529 link2530 link2531 link2532 link2533 link2534 link2535 link2536 link2537 link2538 link2539 link2540 link2541 link2542 link2543 link2544 link2545 link2546 link2547 link2548 link2549 link2550 link2551 link2552 link2553 link2554 link2555 link2556 link2557 link2558 link2559 link2560 link2561 link2562 link2563 link2564 link2565 link2566 link2567 link2568 link2569 link2570 link2571 link2572 link2573 link2574 link2575 link2576 link2577 link2578 link2579 link2580 link2581 link2582 link2583 link2584 link2585 link2586 link2587 link2588 link2589 link2590 link2591 link2592 link2593 link2594 link2595 link2596 link2597 link2598 link2599 link2600 link2601 link2602

[Vue.js] Mutation is not set value no state - Vuex

Mutation is not set value no state.

The problem is that the state is not being updated.

What I’m doing wrong.

Mutation

function cardValidationSet (state, data) {
state.cardValided = data
}

Getters

function cardValidationget (state) {
return state.cardValided
}

Component A

import Store from ‘../store’

display: function () {
Store().commit(‘disponivel/cardValidationSet’, valided)
}

Component B

import { mapGetters, mapActions, mapMutations } from ‘vuex’

computed: {
…mapGetters(‘disponivel’, [‘cardValidationget’])
},
methods: {
onSubmitPay () {
console.log(this.cardValidationget)
},
}

Solution :

if you have setup Vuex properly, the right way to commit a mutation is

this.$store.commit(‘disponivel/cardValidationSet’, valided)

[Vue.js] How to add dynamically v-model and it's initial values to existed html elements by vuejs

For SEO purposes I need to render html elements by php. For example there is these elements.

<?php foreach ($elements as $key => $element): ?>
<select name=”first” v-model=”model[<?= $key; ?>]“>
<option value=””>Select</option>
<option value=”1”>Some Text</option>
<option value=”2”>Some Text</option>
</select>
<select name=”second” v-model=”model[<?= $key; ?>]>
<option value=””>Select</option>
<option value=”4”>Some Text</option>
<option value=”5”>Some Text</option>
</select>



<select name=”eleven” v-model=”model[<?= $key; ?>]>
<option value=””>Select</option>
<option value=”101”>Some Text</option>
<option value=”102”>Some Text</option>
</select>
<?php endforeach; ?>

And probably I can manipulate these elements like this on vue.js side.

const count_models = <?= count($elements) ?>; // in the html
const app = new Vue({
el: ‘#app’,
data: {
model:[]
},
mounted(){
console.log(this.model);
for (let $i = 0; $i < count_models; $i++) {
this.model[$i] = “”;
}
}
})

I cannot declare the initial values for model[?]. I need an xhr or assign counted items to a javascript variable to get how many select element there is on DOM and to declare initial values as null for each model[]. Even I redeclare the initial values of the models, it doesn’t bind. I just put an example on jsFiddle. In Angular1 there was ng-init attribute to declare initial value for the model.

How can I solve this problem ?

https://jsfiddle.net/ks7jmgwv/1/

Solution :

you just encountered one of the most common gotchas of Vuejs: reactivity (and therefor the lack off)!

The issue here is when the model property is created it’s just an empty array/object and any property that you add to that element it’s not going to be reactive: that means any kind of change made programmatically won’t trigger the Vue’s internal whatches, the only reason that the v-model still works is that the changes made by the user and not by the code does actually trigger native HTML events.

You have two possible solutions:

Ignore the reactivy part (but you won’t be able to programmatically update the selected value, or at least it won’t be visible) and just make sure that the ‘Select’ option will be selected by default by assigning it the correct value (in that way you can just skip all the default for-loop initialization).

<option :value=”undefined” selected=”selected” disabled>Select</option>
Follow the offical way suggested by the Vuejs’ documentation to add a new property to an object and still having the advantage of reactivity

this.$set(this.model, $i, “”);

You can check this plunker in which I’m showing you both the ways of obtaining the goal:
https://jsfiddle.net/8y7eu39z/18/

Also, did you know that for placeholder options in a select you can add the attribute disabled?

Reactivy Reference: https://vuejs.org/v2/guide/reactivity.html

Also: if you want a “null” as a default value but did not manage to find a way to make it being recognized by the “select” options just use :value=”null” instead of value=”null” and then you should be able to use
this.$set(this.model, $i, null);

[Vue.js] Nuxt Layout update data on every route

when new to Nuxt/vue.js and am getting confused about how data works between different pages. to display a light or dark logo depending on if when on the index page or not. When navigating between pages the data doesn’t update the route name so the logo doesnt change: Layout page below.

<template>
<main>
<img v-if=”page != ‘index’” src=”~/assets/img/logo-white.svg”>
<img v-else src=”~/assets/img/logo-dark.svg”>
<nuxt />
</main>
</template>

<script>
export default {
data () {
return {
page: this.$route.name
}
}
}
</script>

Any help would be great.
Thanks,
Jamie

Solution :

In a nuxt layout, every page is rendered in place of the <nuxt /> tag.

You are setting the reactive property page in the layout which is mounted only once in the beginning, and all other pages are rendered inside it later. So when a page change occurs the layout doesn’t re-mount and the value of page remains the same.

You can add a watcher on the route like this:

<script>
export default {
data () {
return {
page: this.$route.name
}
}
watch: {
‘$route’: function (value) {
this.page = value.name
}
}
}
</script>

So, now everytime the route changes, page will updated with the new name of the route.

Solution 2:

Use a computed property instead of data, $route is reactive and will trigger a computed update.

computed: {
page() {
return this.$route.name
}
}

You could also just access $route in the template.

<img v-if=”$route.name != ‘index’” src=”~/assets/img/logo-white.svg”>

[Vue.js] How to pass asynchronous values from display to method - Vue?

How to pass asynchronous values from display to method - Vue?

The return is an error indicating that the function does not exist.

Where can I be wrong?

Thank you guys

methods: {
teste (value) {
console.log(value)
}
},
display: function () {
this.teste(true)
}

[vue.js warn]: Error in render: “TypeError: _this2.teste is not a
function”

Solution :

Why you would need to add a display function at the component level? You should not have functions outside of methods object, for a component. Because these are not part of vue.js components conception.

methods: {
teste (value) {
console.log(value)
},
display: function () {
this.teste(true)
}
}

[Vue.js] How to fix vue js or javascript comparison logic error

when trying to disabled button by comparing the quantity by stock quantity. But it seems like the comparison is wrong.

there is tried to log the comparison of each value and yes it’s wrong. How can 6 > 10 is true?

<div class=”col-3 col-md-3 col-sm-4”>
<button
class=”btn btn-success”
v-on:click=”sellStockPortfolio”
v-bind:disabled=”insufficientQuantity || quantity <= 0 || !regexNumberOnly.test(quantity)”
\>Sell</button>
</div>

computed: {
…mapGetters([“regexNumberOnly”]),
insufficientQuantity() {
console.log(“quantity: “, this.quantity);
console.log(“stock: “, this.stock.quantity);
console.log(
`${this.quantity} > ${this.stock.quantity} = ${this.quantity >
this.stock.quantity}`
);
return this.quantity > this.stock.quantity;
}
},

I expect the button would not disabled if the quantity is less or equal to the stock quantity.

Solution :

This will be because you’re comparing strings, not numbers.

If you add in JSON.stringify it’ll be easier to spot:

console.log(“quantity: “, JSON.stringify(this.quantity));
console.log(“stock: “, JSON.stringify(this.stock.quantity));

JSON.stringify will put quotes around the values if they’re strings. Numbers will be left without quotes.

You could observe the types more directly using typeof:

console.log(typeof this.quantity);
console.log(typeof this.stock.quantity);

Strings are compared character by character so “6” is greater than “10” as the character 6 in the first string is being compared to the 1 in the second string.

Try this in the console:

6 > 10 // false
‘6’ > ‘10’ // true

You don’t actually need to use JSON.stringify to spot the type as most browsers render numbers and strings in different colors in the console. Try this:

console.log(“Color test”, 6, “6”);

You should find that the number 6 is in a different colour to the string “6”. In the picture the logged values all seem to be in the same color, suggesting they’re all strings.

The leading zero on 07 also suggests it’s a string. The logging wouldn’t add in that leading zero if it were a number.

The best solution here is to get all the data as the right type in the first place. A quick hack is to convert the strings to numbers when performing the comparison, like this:

return +this.quantity > +this.stock.quantity;

This is using a unary + to convert to a number, other ways to convert strings to numbers are available. However, I would stress again that this would be a last resort and you really need to get the data types fixed properly if at all possible.

[Vue.js] Find an object in array

when making a filter that allows user clicks a checkbox to do filter. When I click a checkbox, It will add that object of item into an array of filters. When clicking again that item, I will remove that item from the array.

when using a hard code for the object of item to make sure they are the same object every time I click. The object look like this:

var item1 = {name: “A”, id: 1};

The below toggleFilter method is triggered when I click a checkbox, then dispatch an action from Vuex.

methods: {
toggleFilter(categoryId) {
var item1 = {name: “A”, id: 1};

this.$store.dispatch(‘filter/toggleFilter’, item1);
}
}

Vuex action:

let actions = {
toggleFilter({state, commit, rootState, rootGetters}, attribute) {
let index = state.filters.indexOf(attribute);

if (index === -1) {
commit(‘addFilter’, attribute);
} else {
commit(‘removeFilter’, index);
}

console.log(state.filters);
}
};

The problem is when I click again the checkbox, it doesn’t remove the object from the array, it adds 1 more object into it.

One more weirdness thing is I use the exact above Vuex action for another object, something like this:

methods: {
toggleFilter(option) {
option.attributeId = this.attribute.id;
option.type = ‘attribute’;

this.$store.dispatch(‘filter/toggleFilter’, option);
}
}

And it works. I don’t know why the 1st case doesn’t work, but the 2nd case works.

Solution :

Every time you create new object var item1 = {name: “A”, id: 1};, so indexOf can’t not find it. If you item’s id is unique, you can try comparing attribute.id

let actions = {
toggleFilter({state, commit, rootState, rootGetters}, attribute) {
let index = state.filters.map(item => item.id).indexOf(attribute.id);
if (index === -1) {
commit(‘addFilter’, attribute);
} else {
commit(‘removeFilter’, index);
}

console.log(state.filters);
}
};

[Vue.js] Axios get call fired on select

when receiving multiple json files from a server. They are all accessible on different urls based on years (2018,2019 and 2020). when prefilling these years into a dropdown but now to fire a get call with axios everytime I change the value(?year=2018, ?year=2019 or ?year=2020). I also have another dropdown that is prefilled with IDs but have no idea how to attach a certain ID to selected year. These dropdowns are acting as filter for a table that is rendered below.

So to be more clear, when I reload I fire a get call for current year like so: baseurl?year=2019, with this selection I get ALL the data but then if I select an ID, this ID needs to be added to url like so:
baseurl?year=2019?id=0

My current code:

data() {
return {
year:[],
id: 0,
}
},

computed: {
axiosParams(){
const params = new URLSearchParams();
params.append(‘year’, this.year);
return params;
},

//this returns my current year
year() {
var now = new Date()
var nowy = now.getFullYear()

return nowy
},

//this method makes sure that the dropdown is always preffiled
//with following years - eg. next year I only need 2019, 2020 and
//2021
years() {
var yearsArray = []
var now = new Date()
for (let i = -1; i < 2; i++) {
var nowy = now.getFullYear() + i
yearsArray.push(nowy)
}
return yearsArray
},

},
methods: {
getYears: function() {
axios.get(‘myurl’,{
params : this.axiosParams
}
}).then((response) => {
this.year = response.data;
this.table = response.data;
})
},
getId: function() {
axios.get(‘myurl’,{
params : {
year: this.year,
id : this.id
}
}
}).then((response) => {
this.id = response.data;
this.table = response.data;
})
},
},

created: {
this.getYears();
this.getId();
}

My HTML:

<select v-model=”year”>
<option v-model=”yearsArray” v-for=”year in years”>{year} .
</option></select>

<select v-model=”id”><option v-for=”item in id”>{item}</option> .
</select>

Thanks!

Solution :

Correct me if I’m wrong but what you are essentially asking is ‘how to watch query change’

if so you can check this link

Solution 2:

So, if I understand, you want to trigger an axios call when an id is selected. This can be done a couple of ways but this way will trigger on the selection of an id, and also on the selection of a year.

<select v-model=”selectedYear” @change=”yearSelected”>
<option v-for=”year in years” :key=”year” :value=”year”>{year} .</option>
</select>

<select v-model=”selectedId” @change=”idSelected”>
<option v-for=”id in ids” :key=”id” :value=”id”>{id}</option> .
</select>

Here, the years is from the computed property for years and ids is what you said was a dropdown “prefilled with IDs”. The two v-model properties are initially set to null then are assigned a value on selection. They are defined in data like so.

data: () => ({
selectedId: null,
selectedYear: null,
}),

Each has a function call to do something with the selected option, @change=”idSelected” which calls this method:

methods: {
idSelected() {
console.log(this.selectedId)
// here you make you axios call using this.selectedId as the param
axios.get(‘myurl’,{
params : {
year: this.selectedYear,
id : this.selectedId
}
},

}

You could have the two selects without the @change and have a button that triggers the function call with @click. Either way you use the selectedId and selectedYear in that method.

[Vue.js] How to append a font-awesome icon to a newly created element within vueJS / Vuetify?

when trying to create a user list in which the user selects their icon from a row of icons. They activate a modal, enter their information, and select ‘add user’. when having trouble getting the value of the icon clicked, as you can see below I use this.icons[0] which will console log. But I cannot successfully get them to dynamically log. In addition I cannot successfully add the icon to the person (even in the case of calling the index, as stated above. What would be the best/cleanest way to do this? I cleaned out the code a bunch, but this should give a solid understanding of such. If I can provide any further code or info, let me know. Thanks in advance!

<template>
<div>
<v-expansion-panel v-for=”user in users” :key=”user.name” class=”mb-1”>
<v-expansion-panel-content>
<div slot=”header” class=”flex-row”>
<v-icon>{user.icon}</v-icon>
<span class=”px-1”>{user.name}</span>
<span class=”px-1”>{user.age}</span>
</div>

</v-expansion-panel-content>
</v-expansion-panel>

<v-dialog max-width=”600px” v-model=”dialog”>
<v-btn fab slot=”activator” class=”primary mb-3”>
<v-icon>fa-user-plus</v-icon>
</v-btn>
<v-card>
<v-card-title>
<h2>Add a New User</h2>
</v-card-title>
<v-card-text>
<v-form class=”px-3” ref=”form”>
<v-text-field label=”Name” v-model=”user.name” prepend-icon=”person”></v-text-field>
<v-text-field label=”Age” v-model=”user.age” prepend-icon=”fa-heart”></v-text-field>

<div>
<v-btn flat icon v-for=”(icon, index ) in icons” :key=”index” @click=”appendIcon()”>
<v-icon>{icon}</v-icon>
</v-btn>
</div>
<v-btn
flat
class=”primary mx-0 mt-3”
@click=”addUser(user);
dialog=!dialog”
\>Add user</v-btn>
</v-form>
</v-card-text>
</v-card>
</v-dialog>
</div>
</template>

<script>

export default {

methods: {
addUser: function(user) {
this.users.push(user);
this.user = {
name: undefined,
age: undefined,
icon: undefined,
};
console.log(user.name + “ added to list”);
},
appendIcon: function() {
console.log(this.icons[0]);
}
},
data() {
return {
dialog = fa
users: [],
user: {
name: undefined,
age: undefined,
icon: undefined,
},
icons: [
“fas fa-user”,
“far fa-user”,
“fas fa-user-cog”,
]
};
}
};
</script>

Solution :

In the buttons for the icons array if you add the individual icon as a parameter you can assign that to the user object. Like so:

@click=”appendIcon(icon)”

and the method:

appendIcon(icon) {
this.user.icon = icon
console.log(icon);
}

Then when you call addUser() you can use the already set user object, so you don’t need to pass that as a parameter.

@click=”addUser”;

and that method:

addUser() {
this.users.push(this.user);
this.user = {
name: undefined,
age: undefined,
icon: undefined,
};
console.log(user.name + “ added to list”);
},

[Vue.js] Check all checkboxes in nested for loop

there is the following nested for loops below. Dasically the format is a grid of checkboxes.Down the side are players and across the top are teams. There is a row for each player and a column for each team and a checkbox for each “cell”.I can select and deselect individual checkboxes. How can I check all checkboxes for each column? checkedPlayerTeams is an array of already checked PlayerTeams if you will.

As you can see, there is added a “Select All” checkbox inside the first loop but checkedPlayerItems will not be updated with the correct “value”. Should I take a different approach? Do you need anything else?

<div class=”flex-row grid_body”>
<div class=”card” v-for=”team in teams” :key=”team.id”>
<input
:id=”‘team_‘ + team.id”
type=”checkbox”
v-model=”checkedPlayerTeams”
:value=”team.id”
\>

<div class=”options”>
<ul>
<li v-for=”player in players”>
<div>
<input
:id=”‘team_‘ + team.id + ‘_player_‘+ player.player_id”
type=”checkbox”
v-model=”checkedPlayerTeams”
:value=”{team_id: team.id, player_id: player.player_id, status: team.status}”
\>
<label :for=”‘team_‘ + team.id + ‘_player_‘+ player.player_id” class=”flexbox flex-label no-bg”>
<span></span>
</label>
</div>
</li>
</ul>
</div>
</div>
</div>

The data structure of checkedPlayerTeams is like:

[ { “player_id”: 2, “team_id”: 1, “status”: true }…..etc.]

Solution :

I think the easiest way to handle this is keep the checked value in each player. So it should be like:

data: () => ({
teams: [
{
id: 1,
players: [
{ id: 11, status: false },
{ id: 12, status: false }
]
},
{
id: 2,
players: [
{ id: 21, status: false },
{ id: 22, status: false },
{ id: 23, status: false }
]
}
]
})

<div v-for=”team in teams” :key=”team.id”>
<div v-for=”player in team.players” :key=”player.id”>
<input type=”checkbox” v-model=”player.status”>
</div>
</div>

For select all players in team, you can listen on change event then call some method as pass team id and checked value like:

<label>
<input
type=”checkbox”
@change=”selectTeam(team.id, $event.target.checked)”
\>
<span>Select All</span>
</label>

selectTeam(teamId, checked) {
let team = this.teams.find(team => team.id === teamId);
team.players.forEach(player => {
player.status = checked;
});
}

For keep the Select All checkbox value respond to player status changed, you can use watcher like:

teams: {
handler() {
this.teams.forEach((team, teamIndex) => {
let checked = true;
team.players.forEach(player => {
checked = checked && player.status;
});
this.$refs.selectTeams[teamIndex].checked = checked;
});
},
deep: true
}

Example

[Vue.js] Assign JSON data/response (api response) to itemsArray dynamically

when new to VueJs

https://github.com/coreui/coreui-free-vue-admin-template/blob/master/src/views/base/Tables.vue

in above vue. to assign the data to someData variable dynamically. I tried to bind it like below but it doesnt work.

var someData = () => JSON.parse(“[{Id:2,RollNo:1000,email:test1@test.com,status:Inactive},{Id:3,RollNo:1001,email:test2@test.com,status:Active}]“);

any suggestions please? how to bind it dynamically or through webapi using axios?

Solution :

After a day of struggle and searching all over the places; finally found the solution.

define an empty array and change from const to var to bind the data dynamically at later stage

var someData = () => [{}]

.
.
.

and inside export default { } call api in mounted method

mounted() {
axios({ method: “GET”, “url”: “https://localhost:80/api/values" }).then(result => {
this.items = () => JSON.parse(result.data);

}, error => {
console.error(error);
this.error= error;
});
}