Develop Reference

Edit post in vue js, axios, django

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?

Vue prop is sent from a component is undefined

I have a Kanban board inside my dashboard which displays issues of a project. I added a menu to allow the user to filter the kanban board by project such that only one project's issue are visible at once. The default view is the issues of all the projects.
In my Dashboard component, I get the list of all projects from a server using axios (which works correctly).
When a user chooses a project, I send to the Kanban board component a prop which is the project id so that I can fetch that project's issues from the server.
However, the prop I'm sending from Dashboard is undefined somehow, and I cannot figure out why
Dashboard.vue
<template>
<v-container>
<v-row class="my-1">
<v-col cols="3">
<h2 style="font-size:40px;color:rgb(92, 92, 92)">Kanban Board</h2>
</v-col>
<v-col cols="7"></v-col>
<v-col cols="2">
<v-menu offset-y>
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">
View
</v-btn>
</template>
<v-list>
<v-list-item v-for="(project, index) in ProjectList" :key="index">
<v-list-item-title #click="changeView(project.id)">{{ project.title }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</v-col>
</v-row>
<v-row>
<KanBanBoard :projectid="project_id"></KanBanBoard>
</v-row>
</v-container>
</template>
<script>
import KanBanBoard from './KanBanBoard.vue'
import { mapGetters, mapActions } from 'vuex'
export default {
components: {
KanBanBoard,
},
data() {
return {
project_id: '',
}
},
computed: {
...mapGetters(['ProjectList']),
},
methods: {
...mapActions(['getProjectList']),
changeView(project_id) {
this.project_id = project_id
},
},
created() {
this.getProjectList()
},
}
</script>
<style scoped>
.view {
font-size: 20px;
}
</style>
NavBar.js (Vuex file Dashboard uses to get the list of projects)
import axios from 'axios'
const state = {
Projects: [],
ProjectsIssuesList: []
}
const getters = {
ProjectList: (state) => state.Projects,
ProjectIssuesList: (state) => state.ProjectsIssuesList
}
const actions = {
async getProjectList({ commit }) {
var projectList = []
var issuesList = []
await axios
.get('https://fadiserver.herokuapp.com/api/v1/my-projects/')
.then(response => {
projectList = response.data
for (let i = 0; i < projectList.length; i++) {
let projectid = projectList[i].id
axios
.get('https://fadiserver.herokuapp.com/api/v1/my-issues-titles/?projectid=' + projectid)
.then(response => {
issuesList.push(response.data)
})
.catch(error => {
console.log(error)
})
}
})
.catch(error => {
console.log(error)
})
commit('setProjects', projectList),
commit('setProjectsIssues', issuesList)
},
}
const mutations = {
setProjects: (state, Projects) => (state.Projects = Projects),
setProjectsIssues: (state, ProjectsIssuesList) => (state.ProjectsIssuesList = ProjectsIssuesList)
}
export default {
state,
getters,
actions,
mutations
}
KanBanBoard.vue
<template>
<v-container>
<v-row wrap>
<v-col xl="4" lg="4" md="4" sm="4" xs="12">
<v-card>
<v-card-title class="blue lighten-3">
<span class="white--text">Open</span>
</v-card-title>
<v-divider horizontal></v-divider>
<v-card-text class="blue lighten-3">
<draggable class="list-group kanban-column" :list="Open" group="tasks">
<v-card
class="#f4f5fa"
style="height:auto; margin-top:10px"
v-for="issue in Open"
:key="issue"
align-center
elevation="3"
>
<v-card-text>
<v-row dense style="width:auto">
<router-link
class="d-flex align-center text-decoration-none grey--text"
style="font-size:18px;"
:to="{ name: 'IssuePage', params: { id: issue.id, issue } }"
>
{{ issue.title }}
</router-link>
</v-row>
<v-row dense>
<v-col>
<v-chip
class="ma-2"
color="red"
outlined
style="position:relative; right:10px;top:10px; height:min-content"
>
{{ issue.issueSeverity }}
</v-chip>
</v-col>
<v-col>
<v-chip
class="ma-2"
color="green"
outlined
style="position:relative; right:83px; top:10px;height:min-content"
>
{{ issue.issueType }}
</v-chip>
</v-col>
</v-row>
</v-card-text>
</v-card>
</draggable>
</v-card-text>
</v-card>
</v-col>
<v-col xl="4" lg="4" md="4" sm="4" xs="12">
<v-card>
<v-card-title class="light-green lighten-3">
<span class="white--text">In Progress</span>
</v-card-title>
<v-divider horizontal></v-divider>
<v-card-text class="light-green lighten-3">
<draggable class="list-group kanban-column" :list="InProgress" group="tasks">
<v-card
class="#f4f5fa"
style="height:auto; margin-top:10px"
v-for="issue in InProgress"
:key="issue"
align-center
elevation="3"
>
<v-card-text>
<v-row dense style="width:auto">
<router-link
class="d-flex align-center text-decoration-none grey--text"
style="font-size:18px;"
:to="{ name: 'IssuePage', params: { id: issue.id, issue } }"
>
{{ issue.title }}
</router-link>
</v-row>
<v-row>
<v-col>
<v-chip
class="ma-2"
color="red"
outlined
style="position:relative; right:10px;top:10px; height:min-content"
>
{{ issue.issueSeverity }}
</v-chip>
</v-col>
<v-col>
<v-chip
class="ma-2"
color="green"
outlined
style="position:relative; right:83px; top:10px;height:min-content"
>
{{ issue.issueType }}
</v-chip>
</v-col>
</v-row>
</v-card-text>
</v-card>
</draggable>
</v-card-text>
</v-card>
</v-col>
<v-col xl="4" lg="4" md="4" sm="4" xs="12">
<v-card>
<v-card-title class="orange lighten-3">
<span class="white--text">Completed</span>
</v-card-title>
<v-divider horizontal></v-divider>
<v-card-text class="orange lighten-3">
<draggable class="list-group kanban-column" :list="Completed" group="tasks">
<v-card
class="#f4f5fa"
style="height:auto; margin-top:10px"
v-for="issue in Completed"
:key="issue"
align-center
elevation="3"
>
<v-card-text>
<v-row dense style="width:auto">
<router-link
class="d-flex align-center text-decoration-none grey--text"
style="font-size:18px;"
:to="{ name: 'IssuePage', params: { id: issue.id, issue } }"
>
{{ issue.title }}
</router-link>
</v-row>
<v-row dense>
<v-col>
<v-chip
class="ma-2"
color="red"
outlined
style="position:relative; right:10px;top:10px; height:min-content"
>
{{ issue.issueSeverity }}
</v-chip>
</v-col>
<v-col>
<v-chip
class="ma-2"
color="green"
outlined
style="position:relative; right:83px; top:10px;height:min-content"
>
{{ issue.issueType }}
</v-chip>
</v-col>
</v-row>
</v-card-text>
</v-card>
</draggable>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import draggable from 'vuedraggable'
import { mapGetters, mapActions } from 'vuex'
export default {
props: ['project_id'],
components: {
draggable,
},
computed: {
...mapGetters(['Open']),
...mapGetters(['InProgress']),
...mapGetters(['Completed']),
},
watch: {
projectid() {
this.fetchIssuesofProject(this.project_id)
this.test()
},
},
methods: {
...mapActions(['fetchIssuesofProject']),
test() {
console.log(this.projectid)
},
},
created() {
this.test(), this.fetchIssuesofProject(this.project_id)
},
}
</script>
<style scoped>
hr {
margin-top: 0.1px;
margin-bottom: 0.1px;
border: 1;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
</style>
Kanban.js
import axios from 'axios'
const state = {
Issues: [],
}
const getters = {
Open: (state) => state.Issues.filter(x => x.issueStatus == 'Open'),
InProgress: (state) => state.Issues.filter(x => x.issueStatus == 'In Progress'),
Completed: (state) => state.Issues.filter(x => x.issueStatus == 'Closed'),
}
const actions = {
async fetchIssuesofProject({ commit }, projectid) {
const response = await axios.get('https://fadiserver.herokuapp.com/api/v1/my-issues-titles/?projectid=' + projectid).catch(error => {
console.log("The error is here")
})
commit('setIssues', response.data)
}
}
const mutations = {
setIssues: (state, Issues) => (state.Issues = Issues)
}
export default {
state,
getters,
actions,
mutations
}```

Probably it's because in KanBanBoard.vue you defined your prop as project_id and in Dashboard.vue you're passing it like this:
<KanBanBoard :projectid="project_id"></KanBanBoard>
instead do:
<KanBanBoard :project_id="project_id"></KanBanBoard>

Login form in vue.js returns undefined

I'm trying to build a simple login/register form using Vuex to store user array. The register works, and creates a new Json object in the array. The problem is the Login because when i try to ask Vuex if a user with a specific username exists it returns me Undefined.
Vuex store code:
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
users:[],
dataset:[]
},
mutations: {
addUser(state,user){
state.users.push(user);
},
addData(state,newData){
state.dataset = newData;
}
},
getters:{
getDataset: state =>{
return state.dataset;
},
getUsers: (state) =>(username) =>{
for(let i = 0; i < state.users.length(); i++){
if(state.users[i].username === username){
return i;
}
}
return -1;
}
}
,
actions: {},
modules: {},
});
Login Code:
<template>
<v-container class="my-16">
<h2 class="text-center">Per iniziare effettua il login!</h2>
<div class="text-center">
<v-dialog
v-model="dialog"
width="500"
persistent>
<template v-slot:activator="{ on, attrs }">
<v-btn
text
color="black"
v-bind="attrs"
v-on="on"
> <v-icon>mdi-login</v-icon>
Login
</v-btn>
</template>
<v-tabs v-model="tab" show-arrows background-color="primary" icons-and-text grow>
<v-tabs-slider color="green darken-4"></v-tabs-slider>
<v-tab v-for="tab in tabs" :key="tab.title">
<v-icon large>{{ tab.icon }}</v-icon>
<div class="caption py-1">{{ tab.title }}</div>
</v-tab>
<v-tab-item>
<v-card>
<v-card-text>
<v-form ref="formLogin" v-model="validLogin" >
<v-text-field label="Username" v-model="usernameLogin" prepend-icon="mdi-account-outline" :rules="nameRules"></v-text-field>
<v-text-field hint="At least 8 characters"
:type="show1 ? 'text' : 'password'"
:append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
label="Password" v-model="passwordLogin"
prepend-icon="mdi-lock-outline"
:rules="passwordRules"
#click:append="show1 = !show1"></v-text-field>
</v-form>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="warning"
text
#click="clearLogin"
>
Clear
</v-btn>
<v-btn
color="error"
text
#click="cancelLogin"
>
Cancel
</v-btn>
<v-btn
color="success"
text
:disabled="!validLogin"
#click="submitLogin"
>
Login
</v-btn>
</v-card-actions>
</v-card>
</v-tab-item>
<v-tab-item>
<v-card>
<v-card-text>
<v-form ref="form" v-model="validRegister" >
<v-text-field label="Name" v-model="name" prepend-icon="mdi-information-outline" :rules="nameRules"></v-text-field>
<v-text-field label="Lastname" v-model="lastname" prepend-icon="mdi-information-outline" :rules="nameRules"></v-text-field>
<v-text-field label="Username" v-model="usernameRegister" prepend-icon="mdi-account-outline" :rules="nameRules"></v-text-field>
<v-text-field hint="At least 8 characters"
:type="show1 ? 'text' : 'password'"
:append-icon="show1 ? 'mdi-eye' : 'mdi-eye-off'"
label="Password"
v-model="passwordRegister"
prepend-icon="mdi-lock-outline"
:rules="passwordRules"
#click:append="show1 = !show1"></v-text-field>
<v-menu
ref="menu"
v-model="menu"
:close-on-content-click="false"
:return-value.sync="dateOfBirth"
transition="scale-transition"
offset-y
min-width="auto"
>
<template v-slot:activator="{ on, attrs }">
<v-text-field
v-model="dateOfBirth"
label="Date of Birth"
prepend-icon="mdi-calendar-outline"
readonly
v-bind="attrs"
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="dateOfBirth"
no-title
scrollable
>
<v-spacer></v-spacer>
<v-btn
text
color="error"
#click="menu = false"
>
Cancel
</v-btn>
<v-btn
text
color="success"
#click="$refs.menu.save(dateOfBirth)"
>
OK
</v-btn>
</v-date-picker>
</v-menu>
<v-textarea :counter="maxDescription" :rules="descriptionRules" label="Description" v-model="description" prepend-icon="mdi-pencil-outline"></v-textarea>
</v-form>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="warning"
text
#click="clearRegister"
>
Clear
</v-btn>
<v-btn
color="error"
text
#click="cancelRegister"
>
Cancel
</v-btn>
<v-btn
color="success"
text
:disabled="!validRegister"
#click="submitRegister"
>
Register
</v-btn>
</v-card-actions>
</v-card>
</v-tab-item>
</v-tabs>
</v-dialog>
</div>
</v-container>
</template>
<script>
export default {
data(){
return{
tab: 0,
validLogin: true,
validRegister:true,
show1: false,
dialog: false,
usernameLogin:'',
passwordLogin:'',
usernameRegister:'',
passwordRegister:'',
menu: false,
minName: 3,
minPassword: 8,
name:'',
lastname:'',
description:'',
dateOfBirth:'',
maxDescription: 150,
descriptionRules:[
v => v.length <= this.maxDescription || 'Max number of characters is 150'
],
nameRules: [
v => v.length >= this.minName || 'Minimum lenght is 3 characters'
],
passwordRules: [
v => v.length >= this.minPassword || 'Minimum lenght is 8 characters'
],
tabs:[
{title:"Login", icon:"mdi-account"},
{title:"Register", icon:"mdi-account-plus-outline"}
]
}
},
methods:{
submitRegister() {
if(this.$refs.form.validate()){
const user = {
name: this.name,
lastname: this.lastname,
username: this.usernameRegister,
password: this.passwordRegister,
description: this.description,
dateOfBirth: this.dateOfBirth
}
this.$store.commit('addUser',user);
this.cancelRegister ();
}
},
submitLogin() {
if(this.$refs.formLogin.validate()){
let user = this.usernameLogin;
console.log(user);
var index = this.$store.getters['getUsers',user];
console.log(index);
if(index != undefined){
this.$router.push('dashboard');
}
}
},
cancelRegister() {
this.$refs.form.reset();
this.validRegister = false;
this.dialog = false;
},
cancelLogin() {
this.$refs.formLogin.reset();
this.validLogin = false;
this.dialog = false;
},
clearRegister() {
this.$refs.form.reset();
this.validRegister = false;
},
clearLogin () {
this.$refs.formLogin.reset();
this.validLogin = false;
},
},
}
</script>
The method that doesn't work properly is submitLogin().
How can i solve that problem?

submitLogin() does not invoke the getUsers function correctly. The function should be called with parentheses:
var index = this.$store.getters['getUsers',user]; ❌
var index = this.$store.getters['getUsers'](user); ✅

How to create a dynamic form vuejs vuetify?

i'm trying to make a dynamic form to work.
I have an array of competences, and inside, i have a skills array. Each skill of the entire competence is going to be evaluated, so it need to have an answer.
Everything is organized in a v-stepper with dynamic steps, and my form fields are being generated by a v-for. For each skill the answer need to have, maybe an array like
answers: [
skillId:
skillLevel:
feedback:
feedforward:
...
]
My question is, being the form dynamically generated, how can i set the v-models for each field? Because a competence can have many skills, so the models need to be different to bind.
Here's my code
<template>
<v-stepper v-model="e1" :appraisal="appraisal">
<v-stepper-header>
<template v-for="n in steps">
<v-stepper-step :key="`${n}-step`" :step="n" :complete="e1 > n" editable></v-stepper-step>
<v-divider v-if="n !== steps" :key="n"></v-divider>
</template>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content v-for="n in steps" :key="`${n}-content`" :step="n">
<v-row align="center" justify="center">
<v-col cols="4">
<v-subheader class="headline">{{appraisal.appraisalCompetences[n-1].competence.name}}</v-subheader>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-row justify="center">
<v-col cols="3">
<v-subheader class="title">Fatores</v-subheader>
</v-col>
<v-col cols="2">
<v-subheader class="title">Presença da competência</v-subheader>
</v-col>
<v-col cols="2">
<v-subheader class="title">Feedback do Gestor</v-subheader>
</v-col>
<v-col cols="2">
<v-subheader class="title">Auto Avaliação</v-subheader>
</v-col>
<v-col cols="3">
<v-subheader class="title">Feedforward</v-subheader>
</v-col>
</v-row>
</v-col>
</v-row>
<v-divider></v-divider>
<template v-for="competence in appraisal.appraisalCompetences[n-1]">
<v-form :key="`${competence.competenceId}-form`">
<v-row v-for="(item, index) in competence.competenceSkills" :key="index">
<v-col cols="12">
<v-row class="mb-n10" justify="center">
<v-col cols="3" class="mt-4">
<span>{{item.skill.name}}</span>
</v-col>
<v-col cols="2">
<v-select
v-model="answers.skillLevel"
outlined
:items="selectLevels"
:name="`skill-level-${item.skill.skillId}`"
label="Selecione"
item-text="level"
item-value="value"
></v-select>
</v-col>
<v-col cols="2">
<v-textarea outlined rows="3" :name="`skill-feedback-${item.skill.skillId}`"></v-textarea>
</v-col>
<v-col cols="2">
<v-textarea
outlined
rows="3"
:name="`skill-selfappraisal-${item.skill.skillId}`"
></v-textarea>
</v-col>
<v-col cols="3">
<v-textarea outlined rows="3" :name="`skill-feedforward-${item.skill.skillId}`"></v-textarea>
</v-col>
</v-row>
</v-col>
</v-row>
</v-form>
</template>
<v-row>
<v-col cols="12">
<v-row align="center" justify="space-between">
<v-btn tile large color="error" #click="previous(n)">
<v-icon dark left>mdi-arrow-left</v-icon>Voltar
</v-btn>
<v-btn tile large color="success" #click="next(n)">
Continuar
<v-icon dark right>mdi-arrow-right</v-icon>
</v-btn>
</v-row>
</v-col>
</v-row>
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</template>
<script>
export default {
data: () => ({
e1: 1,
steps: 1,
appraisal: [],
selectLevels: [
{ value: 0, level: "Ausente" },
{ value: 1, level: "A Desenvolver" },
{ value: 2, level: "Satifatória" },
{ value: 3, level: "Excelencia" },
{ value: 4, level: "Não se aplica" }
],
answers: [
{
competenceId: "",
appraisalId: "",
skillId: "",
skillLevel: "",
feedback: "",
selfAppraisal: "",
feedforward: ""
}
]
}),
created() {
this.initialize();
},
methods: {
initialize() {
axios
.get(`/questionnaire/appraisals/${this.$route.params.appraisalId}`)
.then(response => {
this.appraisal = response.data;
this.steps = this.appraisal.appraisalCompetences.length;
});
},
previous(n) {
if (this.e1 == 1) {
this.$router.push("/app/pdc");
} else {
this.e1 = n - 1;
}
},
next(n) {
if (n === this.steps) {
this.e1 = 1;
} else {
this.e1 = n + 1;
}
}
}
};
</script>
EDITED
Let me try to improve the question
In my form, for each competence, i have a set of skills that will be evaluated. So for each of these skills, i need to have a separate answer, like
for skill 1
skillId:
skillLevel:
feedback:
feedforward:
...
And so on for all other skills. after the user types the answers for every skill in the competence, i need to do the same for competence 2 an so on.
The problema is in the answers part of the form, I don't know how to make every single line count as one answer and after add them to an array of answers
This is what i came up so far
<template v-for="competence in appraisal.appraisalCompetences[n-1]">
<v-row v-for="(item, index) in competence.competenceSkills" :key="index">
<v-col cols="12">
<v-form :key="`${item.skillId}-form`">
<v-row class="mb-n10" justify="center">
<v-col cols="3" class="mt-4">
<span>{{item.skill.name}}</span>
</v-col>
<v-col cols="2">
<v-select
v-model="`${item.skillId}-form`.skillLevel"
outlined
:items="selectLevels"
label="Selecione"
item-text="level"
item-value="value"
></v-select>
</v-col>
<v-col cols="2">
<v-textarea v-model="answer.feedback" outlined rows="3"></v-textarea>
</v-col>
<v-col cols="2">
<v-textarea v-model="answer.selfAppraisal" outlined rows="3"></v-textarea>
</v-col>
<v-col cols="3">
<v-textarea v-model="answer.feedForward" outlined rows="3"></v-textarea>
</v-col>
</v-row>
</v-form>
</v-col>
</v-row>
</template>
export default {
data: () => ({
e1: 1,
steps: 1,
appraisal: [],
selectLevels: [
{ value: 0, level: "Ausente" },
{ value: 1, level: "A Desenvolver" },
{ value: 2, level: "Satifatória" },
{ value: 3, level: "Excelencia" },
{ value: 4, level: "Não se aplica" }
],
answer: {
competenceId: "",
skillId: "",
skillLevel: "",
feedback: "",
selfAppraisal: "",
feedForward: ""
},
anwers: []
}),

first of all there are some good vuejs-vuetify ready form generator, which isbased on standard json-schema.
see below examples and projects, specially the github code for more detail and idea about how to create a good form generator,so you can use them.
https://github.com/koumoul-dev/vuetify-jsonschema-form
https://koumoul-dev.github.io/vuetify-jsonschema-form/latest/?example=basic
if you want to write some project from scrach, you shoud consider that the idea is simple like rendering a inline edit in a table (by using refrence by means of object passing):
see below example:
watch the logic, you should index properly, when i debugged your code, the code always refrences to answer 0 to 5 at least. so you couldnt make it work.
read below with care to fix you problem:
<v-col cols="2">
<v-select
v-model="answers[index + (competence.competenceId-1)*competence.competenceSkills.length ].skillLevel"
outlined
:items="selectLevels"
label="Selecione"
item-text="level"
item-value="value"
></v-select>
</v-col>
<v-col cols="2">
<v-textarea v-model="answers[index + (competence.competenceId-1)*competence.competenceSkills.length].feedBack" outlined rows="3"></v-textarea>
</v-col>
<v-col cols="2">
<v-textarea v-model="answers[index + (competence.competenceId-1)*competence.competenceSkills.length].selfAppraisal" outlined rows="3"></v-textarea>
</v-col>
<v-col cols="3">
<v-textarea v-model="answers[index + (competence.competenceId-1)*competence.competenceSkills.length].feedForward" outlined rows="3"></v-textarea>
</v-col>
or you can use a better idea, seperation of answers like below:
see below for how i fixed the problem to get the idea:

Open a dialog when there is an Error Vuetify. Open dialog condiotionally

I am using vuetify. I have a dialog and i want the dialog to open only when there is an error. I am calling a back-end service from my button which saves the product in the database but when there is an duplicate product it fails. Right now even if i am clicking on the button it opens the dialog with the error message. I want the dialog to only open when there is a duplicate product. So how can i open a dialog conditionally. Success dialog when there is a success and error dialog when there is an error.
<template>
<div>
<v-card v-show="createProducts">
<v-toolbar card prominent color="primary" dark>
<v-toolbar-title>Create Product</v-toolbar-title>
</v-toolbar>
<v-card-text>
{{ product }}
<v-form ref="form" v-model="valid" lazy-validation>
<v-container>
<v-layout row wrap>
<v-flex xs6>
<v-text-field
v-model="product.name"
label="Product Name"
v-validate="'required'"
required
solo=""
data-vv-name="product name"
:error-messages="errors.collect('product name')"
></v-text-field>
</v-flex>
<v-flex xs6>
<v-text-field
v-model="product.code"
label="Product Code"
v-validate="'required'"
required
solo=""
data-vv-name="product code"
:error-messages="errors.collect('product code')"
></v-text-field>
</v-flex>
<v-flex xs12>
<v-textarea
v-model="product.description"
:auto-grow="true"
:box="false"
solo
:autofocus= "true"
:outline="false"
color="black"
background-color="white"
label="Product Description"
rows="3"
></v-textarea>
</v-flex>
<v-flex xs12>
<v-select
:items="dashboard"
label="Dashboard Template"
v-model="product.dashbaord"
data-vv-name="dashboard"
v-validate="'required'"
required
solo=""
:error-messages="errors.collect('template')"
></v-select>
</v-flex>
<!-- dialog box -->
<v-dialog v-model="dialog" width="500">
<v-btn slot="activator" color="primary" #click="createNewProduct" center>Save</v-btn>
<v-card>
<v-card-title class="headline grey lighten-2" primary-title>Error</v-card-title>
<v-card-text>Product Code already exists</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat #click="dialog= false">No</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</v-container>
</v-form>
</v-card-text>
</v-card>
</div>
</template>
<script>
import RestResource from "../services/dataService.js";
const service = new RestResource();
export default {
name: "createProducts",
data() {
return {
createProducts: true,
valid: true,
product: {},
dialog: false,
dashboard: [
"Template1",
"Template2",
"Template3",
"Template4",
"Template5",
"Template6"
]
}
},
methods: {
async createNewProduct() {
let v = await this.$validator.validateAll();
console.log(`validation :: ${v}`)
if (v) {
let a = await service.createProduct(this.product).then(r => {
alert("Done..." + r);
}).catch (e => {
alert("Failed..." + e);
})
// this.$router.push({ name: "products"});
}
}
},
};
</script>

You can set this.dialog = true to make dialog visible
async createNewProduct() {
let v = await this.$validator.validateAll();
console.log(`validation :: ${v}`)
var self = this
if (v) {
let a = await service.createProduct(this.product).then(r => {
alert("Done..." + r);
}).catch(e => {
alert("Failed..." + e);
self.dialog = true
})
// this.$router.push({ name: "products"});
}
}

I figured it out. We just have to use v-show in our v-cards and then set it to success or failure and call the the success or failure in our method depending on our need.
<template>
<div>
<v-card v-show="createProducts">
<v-toolbar card prominent color="primary" dark>
<v-toolbar-title>Create Product</v-toolbar-title>
</v-toolbar>
<v-card-text>
{{ product }}
<v-form ref="form" v-model="valid" lazy-validation>
<v-container>
<v-layout row wrap>
<v-flex xs6>
<v-text-field
v-model="product.name"
label="Product Name"
v-validate="'required'"
required
solo=""
data-vv-name="product name"
:error-messages="errors.collect('product name')"
></v-text-field>
</v-flex>
<v-flex xs6>
<v-text-field
v-model="product.code"
label="Product Code"
v-validate="'required'"
required
solo=""
data-vv-name="product code"
:error-messages="errors.collect('product code')"
></v-text-field>
</v-flex>
<v-flex xs12>
<v-textarea
v-model="product.description"
:auto-grow="true"
:box="false"
solo
:autofocus= "false"
:outline="false"
color="black"
background-color="white"
label="Product Description"
rows="3"
></v-textarea>
</v-flex>
<v-flex xs12>
<v-select
:items="dashboard"
label="Dashboard Template"
v-model="product.dashbaord"
data-vv-name="dashboard"
v-validate="'required'"
required
solo=""
:error-messages="errors.collect('template')"
></v-select>
</v-flex>
<!-- dialog box -->
<v-dialog v-model="dialog" width="500">
<v-btn slot="activator" color="primary" #click="createNewProduct" center>Save</v-btn>
<!-- When product is successfully added -->
<v-card v-show="success">
<v-card-title class="headline grey lighten-2" primary-title>Success</v-card-title>
<v-card-text>Product Successfully Added</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat #click="showProductList">Continue</v-btn>
</v-card-actions>
</v-card>
<!-- When there is an error -->
<v-card v-show="failure">
<v-card-title class="headline grey lighten-2" primary-title>Error</v-card-title>
<v-card-text>Product Code already exists</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" flat #click="dialog= false">No</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-layout>
</v-container>
</v-form>
</v-card-text>
</v-card>
</div>
</template>
<script>
import RestResource from "../services/dataService.js";
const service = new RestResource();
export default {
name: "createProducts",
data() {
return {
createProducts: true,
valid: true,
product: {},
dialog: false,
success: false,
failure: false,
dashboard: [
"Template1",
"Template2",
"Template3",
"Template4",
"Template5",
"Template6"
]
}
},
methods: {
async createNewProduct() {
let v = await this.$validator.validateAll();
console.log(`validation :: ${v}`)
if (v) {
let a = await service.createProduct(this.product).then(r => {
alert("Done..." + r);
// this.success = true
this.$router.push({ name: "products"});
}).catch (e => {
alert("Failed..." + e);
this.failure = true
})
}
}
},
};
</script>