Vue.js 在vuejs中编辑选定行 editItem（）{ 如果（此.selected.length！=1）{ 警报（“仅选择一行”）； }否则{ //我应该在这里放什么？ } }

您好，我使用vuejs为每一行创建了一个带有selectboxs的数据表。 我创建了一个按钮，单击该按钮可激活上述方法，我如何使它在仅选择一行时打开一个表单，并且您可以编辑该行中的信息

我制作了一个表单，当填充表单并单击“addItem”按钮时，数据表将在表单中插入包含信息的行

我试着使用v-edit-dialog，但我就是不能让它工作

以下是全部代码：

<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>

表th+th{左边框：1px实心#dddddd；}
表td+td{左边框：1px实心#dddddd；}
伊恩
描述
马卡
部门
范畴
心房肌
洛哈
统一资源定位地址
羡慕
塔贝拉
过滤列表
{{props.item.ean}
{{props.item.desc}
{{props.item.marca}
{{props.item.dep}
{{props.item.categ}
{{props.item.att}
{{props.item.loja}}
{{props.item.url}
删除
编辑
从“@/API”导入API；
从“@/components/chart/EChart”导入EChart；
从“@/components/widgets/statistic/Administratistic”导入管理信息；
从“@/components/widgets/card/PostListCard”导入PostListCard；
从“@/components/widgets/card/ProfileCard”导入ProfileCard；
从“@/components/widgets/card/PostSingleCard”导入PostSingleCard；
从“@/components/widgets/card/WeatherCard”导入WeatherCard；
从“@/components/widgets/list/PlainTable”导入PlainTable；
从“@/components/widgets/list/PlainTableOrder”导入PlainTableOrder；
从“@/components/VWidget”导入VWidget；
从“vuetify/es5/util/colors”导入材料；
从“@/components/circle/VCircle”导入VCircle；
从“@/components/widgets/chart/BoxChart”导入方框图；
从“@/components/chat/ChatWindow”导入聊天窗口；
从“@/components/widgets/statistic/CircleStatistic”导入CircleStatistic；
从“@/components/widgets/statistic/LinearStatistic”导入LinearStatistic；
导出默认值{
布局：“仪表板”，
组成部分：{
VWidget，
行政的，
聊天窗口，
VCircle，
天气预报卡，
邮政单张卡，
邮寄卡片，
档案卡，
埃查特，
箱形图，
循环统计的，
线性统计，
平淡的，
可诉命令
},
数据（）{
返回{
搜索：“”，
选定：[]，
标题：[
{文本：'EAN'，值：'EAN'，可排序：true，对齐：“中心”}，
{text:'descripção'，value:'desc'，sortable:true，align:'center}，
{text:'Marca'，value:'Marca'，sortable:true，align:'center}，
{text:'departmento'，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}，
],
项目：[{
ean:'9234858583'，
描述：“项目测试”，
玛卡：“达能”，
副局长：“科米达？”，
类别：“Laticino”，
收件人：'酸奶'，
loja:‘Mercadino’，
网址：“www.mercadino.fakeaddress.com”，
}],
}
},
方法：{
附加项（）{
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！=”）{
设registro={
“ean”：document.querySelector（“#ean”）.value，
“desc”：document.querySelector（“desc”）.value，