Vue.js - Passing additional arguments with the Event through @click function.

So here what I would like to do is send some data that I have in my loop through to the function that I'm using in my @click to the method I'm using ( that interacts with Firebase ) . 

Originally my call to this method from 'v-btn' looked like this. 

<v-btn

color="deep-purple dark"

text

@click="makeAdmin"

>

The event here passes through without us having to add the arguments. It's implied.

async makeAdmin(e) {

const functions = firebase.functions();

e.preventDefault();

We could write @click="makeAdmin(event)"

if we wanted to be explicit.  

To pass through an argument from the loop we are in then the following example works. 

<v-list-item

v-for="(Profile) in profiles"

:key="Profile.id"

>

<v-avatar

color="primary"

size="32"

>

<v-img :src='Profile.image'

max-width='100'

overline

/>

</v-avatar>

<v-list-item-content>

<v-list-item-title >{{Profile.firstname}} {{Profile.surname}}</v-list-item-title>

</v-list-item-content>

<v-card-actions>

<v-form

ref="form"

id="makeAdmin"

>

<v-btn

color="deep-purple dark"

text

@click="makeAdmin(Profile.email, $event)"

>

Make Admin

</v-btn>

And the method will look like. 

async makeAdmin(user_email, e) {

const functions = firebase.functions();

e.preventDefault();

const addAdminRole = functions.httpsCallable('addAdminRole');

addAdminRole({email: user_email}).then(result => {

console.log('successful ! ' + result)

})

},

Vue.js - Vuetify forms 'v-text-field' input Errors not in Red

 So, I had this weird issue where I have some of my form Errors coming up in red ( preferred ) and others not. 

Having checked both pieces of code and having been given a clue of what to look for from the CSS 

What I needed to do is wrap the form where the Errors aren't showing in Red with a <v-app> tag. 

<template>

<v-app id="app">

<v-container

How to add MapState to the Computed items - calling Vuex in Vue.js

 So after using several Form validations I’m using in the form from Vuex Store, my code looks like this


computed:{
swellitems(){
return this.$store.state.swellitems
},
weather_sky(){
return this.$store.state.weather_sky
},
weather_wet_dry()
return this.$store.state.weather_wet_dry
},
survey_type(){
return this.$store.state.survey_type
},
one_to_three(){
return this.$store.state.one_to_three
},
wind_force(){
return this.$store.state.wind_force
},
wind_direction(){
return this.$store.state.wind_direction
},
sea_state(){
return this.$store.state.sea_state
},
tide_state(){
return this.$store.state.tide_state
},
tide_movement(){
return this.$store.state.tide_movement
},

Way before this point I’m thinking there must be a better way to deal with this ( although laziness means I don’t hunt it down until it gets this bad. ).
The method we want to use is ‘mapState’

computed:{
...mapState(['swellitems', 'weather_sky', 'weather_wet_dry','survey_type',
'one_to_three', 'wind_force', 'wind_direction','sea_state', 'tide_state', 'tide_movement'])
}

The ‘…' won’t work straight out of the box though. We’ll need to install ‘bable’

INSTALLING BABEL FOR VUEX

Babel-Plugin-Vuex-Store (shortly vx for Vuex) packs along a couple of features to simplify your Vuex-related coding. Installation and usage.

npm install babel-plugin-vuex-store

and then

npm install babel-preset-stage-2 --save-dev

You'll also need to import mapState into your Script

import { mapState } from 'vuex';

After this, my code works and looks my organised :) .