Develop Reference

Pass $route as parameter in axios post request

So I have a vue project with a dashboard that contains many tests and i want to pass the test name as a parameter in an axios request when the user clicks on a button and gets redirected on another page.
I already did the first part and passed the name of the test in route as a parameter name and now i'm trying to fetch the corresponding item in the collection.When using $route.params.name I get an error that says $route is not defined
here's my code so far
<template>
<v-app>
<app-navbar />
<v-main>
<div class="text-center">
<h3>
test {{ $route.params.name }}, {{ $route.query.status }},{{
$route.query.tag
}}
</h3>
<h3 v-if="this.loadAPI">{{failreason()}}</h3>
</div>
<v-data-table
:headers="headers"
:items="imagesref"
:items-per-page="5"
class="elevation-1"
>
<template v-slot:[`item.index`]="{ index }">
{{index+1}}
</template>
<template v-slot:[`item.status`]="{ index }">
{{imagesresult[index][2]}}
</template>
<template v-slot:[`item.ref`]="{ index }">
<v-img :src="imagesref[index]" max-width="750" max-height="750" #click="expref[index] = !expref[index]"/>
<v-overlay :value="expref[index]"><v-img :src="imagesref[index]" max-width="1300" max-height="900" #click="expref[index] = !expref[index]"/> </v-overlay>
</template>
<template v-slot:[`item.test`]="{ index }">
<v-img :src="imagestest[index]" max-width="750" max-height="750" #click="exptest[index] = !exptest[index]"/>
<v-overlay :value="exptest[index]"><v-img :src="imagestest[index]" max-width="1300" max-height="900" #click="exptest[index] = !exptest[index]"/> </v-overlay>
</template>
<template v-slot:[`item.res`]="{ index }">
<v-img :src="imagesresult[index][0]" max-width="750" max-height="750" #click="expres[index] = !expres[index]"/>
<v-overlay :value="expres[index]"><v-img :src="imagesresult[index][0]" max-width="1300" max-height="900" #click="expres[index] = !expres[index]"/> </v-overlay>
</template>
<template #[`item.mis`]="{ index }">
{{Math.round(imagesresult[index][1]*100)/100}}
</template>
<template #[`item.Scrubber`]="{ index }">
<nuxt-link :to="{ path: 'scrubber', query: { imageref: imagesref[index],imagetest:imagestest[index],imageres:imagesresult[index] }}">Show Scrubber</nuxt-link>
</template>
</v-data-table>
</v-main>
</v-app>
</template>
<script>
import appNavbar from "../../../components/appNavbar.vue"
import axios from "axios"
export default {
components: { appNavbar },
name: "App",
data() {
return {
loadAPI:false,
dialog:false,
expref:[],
exptest:[],
expres:[],
items: [],
imagesref: [],
imagestest: [],
imagesresult: [],
headers: [
{ text: 'index',value: 'index',sortable:false},
{ text: 'Status',value: 'status',sortable:false},
{ text: 'Imagesref', value: 'ref',sortable:false },
{ text: 'Imagestest', value: 'test',sortable:false },
{ text: 'Imagesresult', value: 'res',sortable:false },
{ text: 'Mismatch percent', value: 'mis',sortable:false },
{ text: 'Scrubber', value: 'Scrubber',sortable:false },
]
}
},
async created() {
try {
const res = await axios({
method: 'post',
url: 'http://localhost:3002/backend/gettestbyname',
data: {name: $route.params.name}
})
this.items = res.data.data;
this.imagesref = res.data.data[0].refimages;
this.imagestest = res.data.data[0].testimages;
this.imagesresult = res.data.data[0].testresults;
for (let i of this.imagesref){
this.expref.push(false);
this.exptest.push(false);
this.expres.push(false);
}
this.loadAPI=true;
} catch (error) {
console.log(error);
}
},
methods:{
failreason()
{
if (this.items[0].status=="failed"){
let index=0;
for (let i of this.items[0].testresults)
{ console.log(i);
index++;
if (i[2]=="failed")
{
return 'Visual test failed at step number '+index;
}
}
return 'Test set missing screenshots';
}
}
}
}
</script>
<style scoped>
</style>

Globally injected properties in Vue are available from the Vue context, not the global javascript context (like window).
So, in the <script> tag, you have to use this.$router to access it.
In your created hook:
// replace
data: {name: $route.params.name}
//by
data: {name: this.$route.params.name}
From the vue-router docs:
By calling app.use(router), we get access to it as this.$router as well as the current route as this.$route inside of any component:

How to put selected list values inside array in vue

I have a vue application where I have to select two elements from an list component and then put them inside an array.Right now I have my list and I can select them thanks to vuetify I binded it to an array with v-model I can console log it inside of an array but what I want to achieve is something like this:
{
"meetingName":"",
"meetingUrl":"",
"participants":{
participant1: "Hasan",
participant2: "Turan"
}
}
instead I am getting right now this:
{
"meetingName":"",
"meetingUrl":"",
"participants":[
"Hasan",
"Turan"
]
}
Could someone look at my code and tell me what is wrong with it?
html:
<template>
<v-container>
<v-row>
<v-col cols="4">
<v-card>
<v-list>
<v-list-item-group
v-model="model"
multiple
color="indigo"
v-model="model.participants"
>
<v-list-item
v-for="(item, i) in voterArrayFilteredByTime"
:key="item.voterUniqueName"
:value="item.voterUniqueName"
v-on:click= "generateGroup"
>
<v-list-item-content>
<v-list-item-title v-text="item.voterUniqueName"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
</v-col>
</v-container>
</template>
an here is the method with which I want to console log it but it does not work like I said I am just getting numbers.
<script>
import axios from "axios";
export default {
name: "AddGroupsModal",
data : ()=>({
singleSelect: false,
selection: "",
model:{ meetingName: "", meetingUrl: "", participants: [] },
methods: {
generateGroup(){
console.log(this.model)
}
}
</script>

One of the problems in your markup is it has two bindings to v-model when there should be just one (the last one in this case):
<v-list-item-group
v-model="model"❌
multiple
color="indigo"
v-model="model.participants"❌
>
The v-list components can't create the expected value format, but you can use a computed prop along with Array.prototype.reduce to create an object from the array entries:
export default {
computed: {
computedParticipants() {
return this.model.participants.reduce((obj, name, i) => {
obj[`participant${i + 1}`] = name
return obj
}, {})
// OR:
const obj = {}
this.model.participants.forEach((name, i) => {
obj[`participant${i + 1}`] = name
})
return obj
},
},
}
demo

Data transfer problem between two siblings components (Vue js)

I have three components and one of those is the parent of the others I'm trying to pass an object called talk between siblings emiting it inside an event from FollowedBrowser to LeftBar and then passing it via prop from LeftBar to TalksList component, after that another event is emited by TalksList and listened one more time for LeftBar and finally this component redefine the talk object as an empty object.
This is my parent component LeftBar.
<template>
<v-navigation-drawer width="25%" permanent clipped app light>
<talks-list v-if="inRoute('messages')" :talk="talk" #talkAdded="talkAdded()"/>
<template v-if="inRoute('messages')" v-slot:prepend>
<followed-browser #newTalk="addTalk($event)"/>
</template>
</v-navigation-drawer>
</template>
<script>
import FollowedBrowser from "./FollowedBrowser";
import TalksList from "./TalksList";
import { mapGetters } from "vuex";
export default {
data(){
return {
talk: {}
}
},
components: {
FollowedBrowser,
TalksList
},
methods: {
addTalk(talk){
this.talk = talk;
},
talkAdded(){
this.talk = {};
}
}
}
</script>
And this is my two children:
TalksList.vue
<template>
<v-container class="my-0 px-5">
<v-list flat>
<v-list-item-group class="my-0">
<div class="ma-0 pa-0" v-for="(talk, index) in talks" :key="index">
<v-divider v-if="talk.divider"></v-divider>
<v-list-item v-else class="px-2" style="cursor: pointer">
<template>
<v-list-item-avatar>
<v-img :src="correctedImageUrl(talk.recipient)"></v-img>
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title>
<span class="blue--text text--lighten-1">{{ completeName(talk.recipient) }}</span>
</v-list-item-title>
<v-list-item-subtitle>
<span>{{ talk.recipient.username }}</span>
</v-list-item-subtitle>
</v-list-item-content>
</template>
</v-list-item>
</div>
</v-list-item-group>
</v-list>
</v-container>
</template>
<script>
import axios from "axios";
export default {
data(){
return {
talks: []
}
},
props: {
talk: {
type: Object,
default: null,
required: true
}
},
watch: {
talk(val){
if(val){
this.talks.splice(0, 1, val);
this.$emit("talkAdded");
}
}
}
}
</script>
FollowedBrowsed.vue
<template>
<div style="display: inline">
<v-dialog scrollable v-model="dialog" max-width="400px" max-height="500px">
<v-card :loading="loading">
<v-text-field dense outlined color="blue lighten-1" label="Nombre de usuario" class="px-5" append-icon="mdi-magnify" v-model="browsedUsername"/>
<v-divider></v-divider>
<v-card-text style="height: 300px;" class="px-2">
<v-list>
<v-list-item class="px-2" style="cursor: pointer" v-for="listUser in filteredFollowed" :key="listUser.id" #click.prevent="newTalk(listUser)">
<v-list-item-content>
<v-list-item-title>
<span class="blue--text text--lighten-1">{{ completeName(listUser) }}</span>
</v-list-item-title>
<v-list-item-subtitle>
<span>{{ listUser.username }}</span>
</v-list-item-subtitle>
</v-list-item-content>
</v-list-item>
</v-list>
</v-card-text>
</v-card>
</v-dialog>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import axios from "axios";
export default {
data(){
return {
browsedUsername: "",
loading: false,
dialog: false,
skeleton: true,
followed: []
}
},
watch: {
dialog(dialog){
if(!dialog){
this.browsedUsername = "";
this.item = null;
}
}
},
computed: {
...mapGetters({
authenticated: "auth/authenticated",
user: "auth/user"
}),
filteredFollowed(){
return this.followed.filter((user) => {
return user.username.toLowerCase().indexOf(this.browsedUsername.toLowerCase()) !== -1;
})
}
},
mounted(){
axios.get("all_followers_followed/followed")
.then((response) => {
if(response.data){
this.followed = response.data;
this.skeleton = false;
}
})
.catch((error) => {
console.log(error)
});
},
methods: {
async newTalk(user){
this.loading = "blue lighten-1";
await axios.post("messages/new_talk", {recipient_id: user.id})
.then((response) => {
if(response.data){
this.dialog = false;
this.$emit("newTalk", {
messages_number: 0,
recipient: user,
sender: this.user
});
}
})
.catch((error) => {
console.log(error);
});
}
}
}
When the newTalk method is called inside FollowedBrowser component newTalk event is emited but after that my screen freezes like the app was inside infinite loop and I don't know why. I omitted some code that I thought was irrelevant.
Can anybody help me.
Thanks in advance.

I solved... So simple, I just had to get a copy of talk prop inside TalksList, inside watch just put this:
watch: {
talk(val){
if(val){
if(this.talks.length){
this.talks.unshift({ divider: true });
}
let buffer = new Object();
let talk = new Object();
buffer.data = val;
talk = buffer.data;
this.talks.unshift(talk);
}
}
},

How to move rows up & down using v-data-table?

I wanted to know if it is possible to move rows up & down?
I was using a checkbox feature, & the CRUD data table from the documetation.
I couldn't really find any examples in the documentation.
My v-data-table currently looks like this
<v-data-table
v-model="selected"
:headers="headers"
:items="rows"
:search="search"
disable-pagination
hide-default-footer
show-select
class="elevation-1" >
<template v-slot:item="props">
<tr>
<td>
<v-checkbox
v-model="props.selected"
:disabled="!props.selected && selected.length != 0"
:indeterminate="!props.selected && selected.length != 0"
></v-checkbox>
</td>
<td v-for="(prop, key) in props.item" :key="key" #click="onClickItem(key, props.item[key])">
{{props.item[key]}}</td>
<td>
<v-icon small class="mr-2" #click="editItem(props.item)">
mdi-pencil
</v-icon>
<v-icon small #click="deleteItem(props.item, getItemAtIndex(navItem))">
mdi-delete
</v-icon>
</td>
</tr>
</template>
<template> <!-- A dialog box for editing content-->
</template>
</v-data-table>

You can take a look at this example. The example has up and down arrow which you will click and it will update the items array. Note that you must you use Vue.$set to make the update to the items array reactive.
The example is done using vue-composition api and typescript
https://gist.github.com/JeremyWalters/457ea585bab678b3bafeb3ee16e96401
<template>
<v-data-table :headers="headers" :items="items">
<template v-slot:item.actionUp="{item}">
<v-btn color="success" icon #click="moveUp(item.id)">
<v-icon>mdi-arrow-up</v-icon>
</v-btn>
</template>
<template v-slot:item.actionDown="{item}">
<v-btn color="warning" icon #click="moveDown(item.id)">
<v-icon>mdi-arrow-down</v-icon>
</v-btn>
</template>
</v-data-table>
</template>
<script lang="ts">
import {
defineComponent,
SetupContext,
ref,
onMounted,
Ref
} from "#vue/composition-api";
export default defineComponent({
setup(props: any, context: SetupContext) {
const items: Ref<any[]> = ref([]);
const headers = [
{ text: "Test Value", value: "testValue" },
{ text: "", value: "actionUp" },
{ text: "", value: "actionDown" }
];
// Create data example
onMounted(() => {
for (let i = 0; i < 20; i++) {
items.value.push({ id: i, testValue: "testValue " + i });
}
});
// Move items up in the array
function moveUp(id: number) {
const index = items.value.findIndex(e => e.id == id);
if (index > 0) {
const el = items.value[index];
context.root.$set(items.value, index, items.value[index - 1]);
context.root.$set(items.value, index - 1, el);
}
}
// Move items down in the array
function moveDown(id: number) {
const index = items.value.findIndex(e => e.id == id);
debugger;
if (index !== -1 && index < items.value.length - 1) {
const el = items.value[index];
context.root.$set(items.value, index, items.value[index + 1]);
context.root.$set(items.value, index + 1, el);
}
}
return {
moveUp,
moveDown,
headers,
items
};
}
});
</script>

Dynamic class and color binding in VueJs?

I have this Custom Sort method that on my divs that arranges them ascending or descending. My question is how can i by default have the icon color greyed out and only once you click on the icon, it turns black while the others remain greyed out something like what vuetify data tables offers https://v15.vuetifyjs.com/en/components/data-tables.
Here is a link to my pen.
new Vue({
el: '#app',
data() {
return {
headers: [{
text: "Name",
value: "name"
}, // changed this to name
{
text: "Grades",
value: "grades"
}
],
labels: ["Andy", "Max", "John", "Travis", "Rick"],
Grades: [99, 72, 66, 84, 91],
sortKey: "", // added a sortKey,
direction: 1
}
},
computed: {
tableItems() {
let retVal = this.labels.map((label, i) => {
return {
name: label,
grades: this.Grades[i]
};
});
// if there is a sortKey use that
if (this.sortKey) {
retVal.sort((a, b) =>
this.direction * // here multiply by the direction
(a[this.sortKey] < b[this.sortKey] ? -1 : 1)
);
}
return retVal;
}
},
methods: {
sortBy(prop) {
if (this.sortKey === prop) {
this.direction *= -1 // change direction to -ve or positive
}
this.sortKey = prop;
console.log(prop);
}
}
})
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout>
<v-flex v-for="header in headers" :key="header.text" xs4 py-1>
<span>
{{ header.text }}
<v-icon small #click="sortBy(header.value)">arrow_upward</v-icon>
</span>
</v-layout>
<v-layout v-for="item in tableItems" :key="item.name">
<v-flex xs4 py-1>
<span>{{ item.name }}</span>
</v-flex>
<v-flex xs4 py-1>
<span>{{item.grades}}</span>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
I am trying to replicate what vuetify data table offers but i am not able to figure out how would bind the color to the icon. i Just want to set the color of the icon and then change it to black or grey when it is clicked based on the header value.

This is low-tech but you could control the color with a (dynamic, bound) classname that keys off a method to test your sortKey (either on the icon itself, or on a parent element).
Forked Pen
:class="{ current: sortKey == header.value }"

You could create a method...
sortIconClass(val) {
return (this.direction===1 && val===this.sortKey)?'black--text':'grey--text'
}
And use it like...
<v-icon small #click="sortBy(header.value)" :class="sortIconClass(header.value)">arrow_upward</v-icon>
Codeply demo
For the icon, you can do something similar...
<v-icon small #click="sortBy(header.value)" :class="sortIconClass(header.value)">{{sortIcon(header.value)}}</v-icon>
sortIcon(val) {
return (this.direction===1 && val===this.sortKey)?'arrow_upward':'arrow_downward'
}
Updated Codeply

The icon itself is a component that has it's own state, you can do the same, create a single file component Icon.vue, then import it into the vue instance you are using right there
<template>
<i #click="setActive" v-bind:class="{ active: isActive }"></i>
</template>
<script>
data() {
return {
active: false
}
},
methods: {
setActive() {
active = true
}
},
computed: {
isActive() {
return active
}
}
</script>
<style scoped>
.active {
/* do whatever */
}
</style>
import:
import Icon from 'wherever/icon/is.vue'
/* ... */
components: {
'icon': Icon,
}