I am unable to route to signup page when goto signup button is pressed, I have attached the code snippets below.
SignUp.vue
<template>
<v-app id="inspire">
<v-content>
<v-container
fluid
fill-height
>
<v-layout
align-center
justify-center
>
<v-flex
xs12
sm8
md4
>
<v-card class="elevation-12">
<v-toolbar
color="primary"
dark
flat
>
<v-toolbar-title>SIGNUP FORM</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field
label="Email"
name="email"
type="text"
></v-text-field>
<v-text-field
id="password"
label="Password"
name="password"
type="password"
></v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary">SIGN UP</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</template>
router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import SignUp from './views/SignUp.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/home',
name: 'home',
component: Home,
},
{
path: '/signup',
name: 'signup',
component: SignUp,
},
],
});
App.vue
<template>
<v-app>
<v-content>
<v-btn :to="{ name:'signup'}">GOTO SIGNUP</v-btn>
</v-content>
</v-app>
</template>
<script>
export default {
name: 'App',
components: {
},
data: () => ({
//
}),
};
</script>
When I execute this code there is no error in console and everything compiles correctly I am able to see "GOTO SIGNUP" button but when I click it nothing happens no errors,nothing happens, can you please help me to reroute to signup page I am using feathersjs,vue.js and vuetify. Any help would be appreciated. Thanks in anticipation.
If App.vue is where you're defining your main Vue instance, you will need to add the router to it:
<script>
import 'router' from 'router.js'
export default {
name: 'App',
router,
components: {
},
data: () => ({
//
}),
};
</script>
Also, as #Alexander Staroselsky mentioned in the comment, you will need to add a <router-view> element so Vue knows where to render the route component.
<template>
<v-app>
<v-content>
<v-btn :to="{ name:'signup'}">GOTO SIGNUP</v-btn>
<router-view></router-view>
</v-content>
</v-app>
</template>
Related
Below is the parent component and child component. I am trying to access tabs_value data in the parent component from the child component but it is returning as undefined.
this.$parent.tabs_value returns as undefined when I try to access it inside the run method in the child component.
Please help me find where I am going wrong? Below is the code
Parent Component
<template>
<div>
<v-layout row wrap>
<v-flex xs12 sm12 lg12>
<div>
<v-card>
<v-tabs v-model="tabs_value"
color="black"
centered
show-arrows
>
<v-toolbar-title>Custom</v-toolbar-title>
<v-spacer></v-spacer>
<v-tab href="#build">Build</v-tab>
<v-tab href="#run">Run</v-tab>
</v-tabs>
<v-tabs-items v-model="tabs_value">
<v-tab-item value="#build" id="build">
<Build ref="build_reports" />
</v-tab-item>
<v-tab-item value="#run" id="run">
<Run :reports="reports" ref="run_reports" />
</v-tab-item>
</v-tabs-items>
</v-card>
</div>
</v-flex>
</v-layout>
</div>
</template>
<script>
import Build from 'views/build.vue'
import Run from 'views/run.vue'
import URLs from 'views/routes'
export default {
components: {
Build,
Run
},
data: function() {
return {
tabs_value: 'build',
isLoaded: true,
reports: []
}
},
created() {
this.fetch();
},
methods: {
fetch() {
this.$axios.get(URLs.REPORTS_URL)
.then(response => {
this.reports = response.data
});
}
}
};
</script>
Child Component run.vue
<template>
<div>
<v-layout row wrap>
<v-flex xs12 sm12 lg12>
<div>
<v-card>
<div>
<v-data-table
:headers="headers"
:items="reports"
hide-default-footer
:mobile-breakpoint="0">
<template slot="item" slot-scope="props">
<tr>
<td>{{props.item.name}}</td>
<td>
<div>
<v-tooltip attach left>
<template v-slot:activator="{ on, attrs }">
<a v-bind="attrs" v-on="on"
class="" href='javascript:void(0);'
#click="run(props.item)"><i small slot="activator" dark color="primary" class="fas fa-play"></i></a>
</template>
<span>Run</span>
</v-tooltip>
</div>
</td>
</tr>
</template>
<template slot="no-data" >
<v-alert id='no-data' :value="true" color="error" icon="warning">
No Reports Yet
</v-alert>
</template>
</v-data-table>
</div>
</v-card>
</div>
</v-flex>
</v-layout>
</div>
</template>
<script>
import URLs from 'views/routes'
export default {
props: ['reports'],
data: function() {
return {
headers: [
{ text: 'Name', value: 'name', sortable: false },
{ text: 'Actions', sortable: false }
],
}
},
methods: {
run(report) {
debugger
// this.$parent.tabs_value returns as undefined
}
}
}
</script>
you can use component events i.e $emit.
Below is example which will tell you how to use $emit. (https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events)
Parent Component
<template>
<ChildComponent #updateTabsValue="updateTabsValue"/>
</template>
<script>
export default {
data(){
return {
tabsValue: 'tabs',
};
},
methods:{
updateTabsValue(val){
this.tabsValue = val;
}
},
}
</script>
Child Component
<template>
<button #click="$emit('updateTabsValue','newVal')"/>
</template>
I start coding in vuetify and want to make Edit button who get the data of selected id, response selected post from axios and transfer it to another components.
I trying props but its not working here, or i do something wronk with it.
There is my List and Edit components:
<template>
<v-container>
<v-row>
<v-col cols="12">
<v-list shaped>
<v-list-item-group color="deep-purple" v-model="selected" multiple>
<v-list-item v-for="item in todoList" :key="item.id">
<v-list-item-icon>
{{ item.id }}
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>
<strong>{{ item.title }}</strong>
</v-list-item-title>
</v-list-item-content>
<v-btn fab dark small color="purple">
<v-icon dark #click="Edit()"> mdi-pencil </v-icon>
</v-btn>
</v-list-item>
</v-list-item-group>
</v-list>
</v-col>
</v-row>
</v-container>
</template>
<script>
import axios from "axios";
export default {
name: "BookList",
data: () => ({
selected: [],
todoList: [],
}),
mounted() {
this.getTodos();
},
methods: {
getTodos() {
axios.get("http://127.0.0.1:8000/api/todo/").then((response) => {
this.todoList = response.data;
});
},
Edit() {
this.$emit("title", this.item.title);
},
},
};
</script>
<template>
<v-container>
<v-row>
<v-col cols="12">
<v-form>
<v-text-field
v-model="this.title"
:counter="64"
label="title"
required
></v-text-field>
</v-form>
</v-col>
<v-btn #click="edit" color="success" class="mr-4"> Edit </v-btn>
</v-row>
</v-container>
</template>
<script>
export default {
data: () => {
return {
title: this.title,
};
},
components: {},
mounted() {},
methods: {},
};
</script>
but i stuck. I think i do somethink wrong with Emit medo but dont know what. Can u give some hint what to do?
I have the following dropdown menu:
<template>
<v-menu close-on-click transition="slide-y-transition">
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" v-bind="attrs" v-on="on">
Menu
</v-btn>
</template>
<v-list>
<v-list-item v-for="(item, index) in menuItemsMisc" :key="index" v-model="item.model">
<v-list-item-title>
<v-btn block color="white" #click="item.fn">{{ item.title }}</v-btn>
</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<!-- Modal code here -->
</template>
<script>
export default {
name: 'MenuBar',
data: () => ({
loginModal: false,
purchaseModal: false,
menuItemsMisc: [
{ title: 'Login',
model: 'loginModal',
fn: () => { this.loginModal = true}
},
{ title: 'Purchase',
model: 'purchaseModal',
fn: () => { this.purchaseModal = true }
},
]
}),
}
</script>
And I am trying to display this Login Modal When the Login Button is clicked in the dropdown.
<v-dialog v-model="loginModal" persistent max-width="500px">
<v-card class="elevation-12">
<v-toolbar color="primary" dark flat>
<v-toolbar-title>Login form</v-toolbar-title>
<v-spacer></v-spacer>
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field name="login" prepend-icon="mdi-account" type="text"></v-text-field>
<v-text-field id="password" name="password" prepend-icon="mdi-lock" type="password">
</v-text-field>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary">Login</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
But whenever I click the Login or Purchase Button, I have an error that says:
TypeError: Cannot set property 'loginModal' of undefined
What is the Problem here?
From the Vue docs on v-model:
You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type.
The v-model property on your <v-dialog> component is expecting it to be an input of some type.
You should be able to simply change this to a v-if:
<v-dialog v-if="loginModal" persistent max-width="500px">
This will cause the <v-dialog> component to display when your button is clicked.
EDIT: Please also make sure your data property on the Vue instance is declared as a class-style function. If you use a lambda function you will lose the this scope when referring to this.loginModal:
export default {
...
data() {
return {
...
}
}
}
I'm trying to present the data coming from my API using VUEX and AXIOS, however on my screen nothing appears as shown in the image:
But in console.log the data appears:
In Vue dev tools it appears as follows:
I tried different ways but due to my little experience I was not successful and I would like a help.
Follow my codes:
Clients.vue
<template>
<!-- Inicio do CONTAINER principal -->
<v-container fluid>
<v-row
justify="center"
>
<!-- Inicio do BLOCO principal -->
<v-col
md="9"
xs="12"
>
<nav-bar />
<v-card
class="mx-auto"
flat
height="900"
>
<v-list-item three-line>
<v-list-item-content>
<v-list-item-title class="display-1 font-weight-black">{{ pageName }}</v-list-item-title>
</v-list-item-content>
<!-- Inicio BLOCO button actions -->
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="success"
depressed
large
>
New Client
</v-btn>
</v-card-actions>
<!-- Final BLOCO button actions -->
</v-list-item>
<!-- Inicio COMPONENTE TAB -->
<v-card
flat
tile
>
<v-col>
<v-tabs>
<v-tab class="text-capitalize">Search</v-tab>
<v-tab class="text-capitalize">Dashboard</v-tab>
<v-tab-item>
<v-divider></v-divider>
<!-- Início BLOCO Table-->
<v-card
flat
tile
>
<v-col
justify="center"
>
<v-col
md="5"
>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
outlined
dense
class="pt-3"
></v-text-field>
</v-col>
<v-data-table
:headers="headers"
:items="clients"
:search="search"
></v-data-table>
</v-col>
</v-card>
<!-- Final BLOCO Table-->
</v-tab-item>
</v-tabs>
</v-col>
</v-card>
<!-- Final COMPONENTE TAB -->
</v-card>
</v-col>
<!-- Final do BLOCO principal -->
</v-row>
</v-container>
<!-- Final do CONTAINER principal -->
</template>
<script>
import { mapState} from 'vuex';
const state = mapState(['clients']);
export default {
name: 'Clients',
computed: state,
data: () => ({
pageName: 'Clients',
search: '',
headers: [
{ text: 'Name', value: 'firstName' },
{ text: 'Phone', value: 'phone' },
{ text: 'E-mail', value: 'email' },
],
}),
created () {
this.initialize()
},
methods: {
initialize () {
//console.log(this.$store)
this.$store.dispatch('loadData') // dispatch loading
},
},
}
</script>
store/modules/client.module.js
import axios from 'axios'
const URL = 'http://192.168.15.11:3000/clients';
const client = {
state: () => ({
clients: [],
loading: true
}),
mutations: {
updateClients(state, clients) {
state.clients = clients
},
changeLoadingState(state, loading) {
state.loading = loading
}
},
actions: {
loadData({commit}) {
axios.get(URL).then((response) => {
console.log(response.data, this)
commit('updateClients', response.data)
commit('changeLoadingState', false)
})
}
},
getters: {
//
}
}
export default client;
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth.module'
import client from './modules/client.module'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
auth:auth,
client:client,
},
})
Note: The authentication part is working perfectly in this form of store modules
I made a table component in my project as I have multiple tables that I want to all look the same.
I insert my table onto my page and everything is working fine.
On the table is a dialog which opens correctly but inside that dialog is another one of my table components and this does not render.
It will work if I change the name of the component and have two separate instances but that is not what I am trying to do.
How can I get my table working across all components? Using Vue CLI.
Table component:
<template>
<v-data-table :headers="headers" :items="items" :no-data-text="noDataText" :dark="dark">
<template v-slot:top>
<v-toolbar :dark="dark" flat>
<v-toolbar-title>{{ title }}</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-btn #click="dialog=true" color="success" class="mr-2">
Load Default Frames
<v-icon right>mdi-download</v-icon>
</v-btn>
<v-btn color="primary" class="mr-2">
Create New Frame
<v-icon right>mdi-image-plus</v-icon>
</v-btn>
<Dialog v-model="dialog" />
<!-- <Frame v-model="dialog" :editedFrame="editedFrame" :oldIndex="oldIndex" #close="close" />
<DefaultFrames v-model="defaultFramesDialog" :selectable="true" :items="defaultFrames" />-->
</v-toolbar>
</template>
</v-data-table>
</template>
Dialog component:
<template>
<v-dialog v-model="dialog">
<v-card :dark="dark">
<v-card-title>
{{ name}}
<v-divider class="mx-4" inset vertical></v-divider>
<v-spacer></v-spacer>
<v-btn icon #click="dialog = false">
<!-- <v-icon #click="$emit('close')">mdi-close</v-icon> -->
</v-btn>
</v-card-title>
<Table :is="child_component" :headers="frameHeaders" :items="defaultFrames" />
<v-card-actions>
<v-btn #click="log">Log</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
Table.vue
<template>
<v-btn #click.stop="emitOpenDialog">Open Dialog</v-btn>
</template>
<script>
export default {
methods: {
emitOpenDialog() {
// I've use vueBus for emiting
this.$bus.emit("open-dialog")
}
}
}
</script>
Dialog.vue
<template>
<v-dialog v-model="dialog"> ... </v-dialog>
</template>
<script>
export default {
data: () => ({
dialog: false
},
created() {
this.$bus.on("open-dialog", this.openDialog)
},
beforeUnmount() {
this.$bus.off("open-dialog")
},
methods: {
openDialog() {
this.dialog = true
}
}
}