Edit selected rows in vuejs - vue.js

Question

editItem(){
if(this.selected.length!=1) {
alert("Choose only one row");
} else {
//what should i put in here?
}
}
Hi, I created a datatable with selectboxs for each row using vuejs.
I created a button that when clicked activates the method above, how can I make it that when just one row is selected a form is opened and you can edit the info in that row?
I made a form that when filled and a button "addItem" is clicked the data-table will insert the row with the info in the form.
I tried using v-edit-dialog but i just cant make it work...
here is the whole code:
<style>
table th + th { border-left:1px solid #dddddd; }
table td + td { border-left:1px solid #dddddd; }
</style>
<template>
<div id="consulta">
<v-container grid-list-xl fluid>
<v-layout row wrap>
<v-flex sm12>
<v-widget title="Testando">
<div slot="widget-content">
<v-container id="teste">
<v-layout row>
<v-flex xs4>
<v-subheader>EAN</v-subheader>
</v-flex>
<v-flex xs8>
<v-text-field
name="ean"
label=""
color="primary"
id="ean"
mask="#.######.######"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs4>
<v-subheader>Descrição</v-subheader>
</v-flex>
<v-flex xs8>
<v-text-field
name="desc"
id="desc"
label=""
value=""
:rules="[(v) => v.length <= 50 || 'Max 50 characters']"
:counter="50"
single-line
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs4>
<v-subheader>Marca</v-subheader>
</v-flex>
<v-flex xs8>
<v-text-field
name="marca"
label=""
color="primary"
id="marca"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs4>
<v-subheader>Departamento</v-subheader>
</v-flex>
<v-flex xs8>
<v-text-field
name="dep"
label=""
color="primary"
id="dep"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs4>
<v-subheader>Categoria</v-subheader>
</v-flex>
<v-flex xs8>
<v-text-field
name="categ"
label=""
color="primary"
id="categ"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs4>
<v-subheader>Atributos</v-subheader>
</v-flex>
<v-flex xs8>
<v-text-field
name="att"
label=""
color="primary"
id="att"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs4>
<v-subheader>Loja</v-subheader>
</v-flex>
<v-flex xs8>
<v-text-field
name="loja"
label=""
color="primary"
id="loja"
></v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs4>
<v-subheader>URL</v-subheader>
</v-flex>
<v-flex xs8>
<v-text-field
name="url"
label=""
color="primary"
id="url"
></v-text-field>
</v-flex>
</v-layout>
<div>
<v-btn small color="primary" #click="addItem">Enviar</v-btn>
</div>
</v-container>
</div>
</v-widget>
</v-flex>
<v-flex sm12>
<h1>Tabela</h1>
</v-flex>
<v-flex lg12>
<v-toolbar card color="white">
<v-text-field
flat
solo
prepend-icon="search"
placeholder="Type something"
v-model="search"
hide-details
class="hidden-sm-and-down"
></v-text-field>
<v-btn icon>
<v-icon>filter_list</v-icon>
</v-btn>
</v-toolbar>
<v-divider></v-divider>
<v-card>
<v-card-text class="pa-0">
<v-data-table
:headers="headers"
:search="search"
:items="items"
item-key="ean"
class="elevation-1"
select-all
v-model="selected">
<template slot="items" slot-scope="props">
<td> <v-checkbox v-model="props.selected" primary hide-details></v-checkbox></td>
<td class="text-xs-center">{{ props.item.ean }}</td>
<td class="text-xs-center">{{ props.item.desc }}</td>
<td class="text-xs-center">{{ props.item.marca }}</td>
<td class="text-xs-center">{{ props.item.dep }}</td>
<td class="text-xs-center">{{ props.item.categ }}</td>
<td class="text-xs-center">{{ props.item.att }}</td>
<td class="text-xs-center">{{ props.item.loja }}</td>
<td class="text-xs-center">{{ props.item.url }}</td>
</template>
</v-data-table>
</v-card-text>
</v-card>
<div>
<v-btn color="red" #click="deleteItem">Delete</v-btn>
<v-btn color="orange" #click="editItem">Edit</v-btn>
</div>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
import API from '#/api';
import EChart from '#/components/chart/echart';
import MiniStatistic from '#/components/widgets/statistic/MiniStatistic';
import PostListCard from '#/components/widgets/card/PostListCard';
import ProfileCard from '#/components/widgets/card/ProfileCard';
import PostSingleCard from '#/components/widgets/card/PostSingleCard';
import WeatherCard from '#/components/widgets/card/WeatherCard';
import PlainTable from '#/components/widgets/list/PlainTable';
import PlainTableOrder from '#/components/widgets/list/PlainTableOrder';
import VWidget from '#/components/VWidget';
import Material from 'vuetify/es5/util/colors';
import VCircle from '#/components/circle/VCircle';
import BoxChart from '#/components/widgets/chart/BoxChart';
import ChatWindow from '#/components/chat/ChatWindow';
import CircleStatistic from '#/components/widgets/statistic/CircleStatistic';
import LinearStatistic from '#/components/widgets/statistic/LinearStatistic';
export default {
layout: 'dashboard',
components: {
VWidget,
MiniStatistic,
ChatWindow,
VCircle,
WeatherCard,
PostSingleCard,
PostListCard,
ProfileCard,
EChart,
BoxChart,
CircleStatistic,
LinearStatistic,
PlainTable,
PlainTableOrder
},
data() {
return{
search: '',
selected: [],
headers:[
{text:'EAN', value:'ean', sortable: true, align:"center"},
{text:'Descrição', value:'desc', sortable: true, align:"center"},
{text:'Marca', value:'marca', sortable: true, align:"center"},
{text:'Departamento', value:'dep', sortable: true, align:"center"},
{text:'Categoria', value:'categ', sortable: true, align:"center"},
{text:'Atributos', value:'att', sortable: true, align:"center"},
{text:'Loja', value:'loja', sortable: true, align:"center"},
{text:'URL', value:'url', sortable: true, align:"center"},
],
items:[{
ean: '9234858583',
desc: 'Item teste',
marca: 'Danone',
dep: 'Comida?',
categ: 'Laticinio',
att: 'Yogurt',
loja: 'Mercadinho',
url: 'www.mercadinho.fakeaddress.com',
}],
}
},
methods: {
addItem(){
if(document.querySelector("#ean").value!=""&&
document.querySelector("#desc").value!=""&&
document.querySelector("#marca").value!=""&&
document.querySelector("#dep").value!=""&&
document.querySelector("#categ").value!=""&&
document.querySelector("#att").value!=""&&
document.querySelector("#loja").value!=""&&
document.querySelector("#url").value!=""){
let registro = {
"ean": document.querySelector("#ean").value,
"desc": document.querySelector("#desc").value,
"marca":document.querySelector("#marca").value,
"dep": document.querySelector("#dep").value,
"categ": document.querySelector("#categ").value,
"att": document.querySelector("#att").value,
"loja": document.querySelector("#loja").value,
"url": document.querySelector("#url").value,
};
this.insert(registro);
this.items.push(registro)
}
else{
alert("Um ou mais campos não foram preenchidos!");
}
},
editItem(){
if(this.selected.length){
alert("Select just one row")
}
else{
//show form to edit the info
}
},
deleteItem(){
if(confirm("Deseja deletar tais fileiras?")){
for(var i = 0; i < this.selected.length; i++){
const index = this.items.indexOf(this.selected[i]);
this.items.splice(index, 1);
}
}
}
}
}
</script>

Answer 1

Since you're using Vuetify as your Material Design Framework you could use the Dialog Component. You can find many Example in the official documentation: https://vuetifyjs.com/en/components/dialogs#form