Question

我有一个vuetify select（v-select）：

 <v-select prepend-icon="local_shipping" :rules="[v => !!v || 'Es necesario asignarl el T.A.R.']" required label="T.A.R." v-model="editedItem.tarID" :items="tars" item-text="nombre" item-value="id"></v-select>

我想要做的是在编辑模式下获取id的值，即以这种方式：

我一直在关注vuetify的官方文档，在模态对话框中编辑一个表项。

正如输入已分配文本一样，我也希望select有自己的分配数据。

这是我的拥有：编辑按钮：

<v-btn icon class="mx-0" @click="editItem(props.item)">
          <v-icon color="info">mode_edit</v-icon>
      </v-btn>

editedItem和defaultItem，就像官方文档一样：

editedItem: {
    entidadID: "",
    numeroEstacion: "",
    tarID: "",
    clave: "",
    id:""
  },
  defaultItem: {
    entidadID: "",
    numeroEstacion: "",
    tarID: "",
    clave: "",
    id: ""
  },

我在数据中填充v-select的方式：

 tars: [
    {
      id: "",
      nombre: ""
    }
  ],

我像这样填写表格：

    <v-data-table
    :headers="headers"
    :items="items"
    hide-actions
    class="slideInDown"
    :search="search"
    :id="items.id"
  >
    <template slot="items" slot-scope="props">
      <td>{{ props.item.grupo }}</td>
      <td class="text-xs-right">{{ props.item.numeroEstacion}}</td>
      <td class="text-xs-right">{{ props.item.clave }}</td>
      <td class="text-xs-right">{{ props.item.nombre }}</td>
      <td class="text-xs-right">{{props.item.id}}</td>
      <td class="justify-center layout px-0">
          <v-btn icon class="mx-0" @click="editItem(props.item)">
              <v-icon color="info">mode_edit</v-icon>
          </v-btn>
          <v-btn icon class="mx-o" @click="deleteItem(props.item)">
              <v-icon color="red">delete_sweep</v-icon>
          </v-btn>
      </td>
    </template>
    <v-alert slot="no-results" :value="true" color="error" icon="warning">
      Tu búsqueda para "{{search}}" no arrojó resultados.
    </v-alert>
  </v-data-table>

editItem按钮：

 editItem(item) {
  this.editedIndex = this.items.indexOf(item);      
  this.editedItem = Object.assign({}, item);
  this.dialog = true;
},

在数据返回中，editedIndex等于-1。所以当我触摸New Item按钮editedIndex = -1时，当我触摸编辑按钮时，editedIndex！= -1，就像文档一样

官方文件的链接： https://vuetifyjs.com/en/components/data-tables

这是我的PUT方法：

      if(this.editedIndex > -1){
      axios({
          headers:{
              "Authorization": "Bearer "+localStorage.getItem('token')
          },
          method: "put",
          url: "http://localhost:58209/api/PutEstacion",
          data:{
                NumeroEstacion: this.editedItem.numeroEstacion,
                Clave: this.editedItem.clave,
                **TarID: this.editedItem.tarID**,
                ID: this.editedItem.id,
          }

      }).then(response => {
          console.log(response);
          this.snackbar = true;
          this.textSnackbar = "La información ha sido actualizada correctamente";
          this.dialog = false
      }).catch(error =>{
          console.log(error.response);
          this.snackbar = true;
          this.textSnackbar = "Lo sentimos ha ocurrido un problema actualizando la informacíón";
          this.dialog = false
      });
  }

这一行：TarID: this.editedItem.tarID没有任何价值。所以我不能放入我的WebApi。最后我的WbApi：

 var ID = _context.Estacion.Where(x => x.ID == putEstacionDTO.ID).Select(x => x.ID).FirstOrDefault();
  var NumeroEstacion = putEstacionDTO.NumeroEstacion;
  var Clave = putEstacionDTO.Clave;
  var TarID = putEstacionDTO.TarID;

  var putEstacion = _context.LoadStoredProc("PutEstaciones")
    .WithSqlParam("p0", NumeroEstacion)
    .WithSqlParam("p1", Clave)
    .WithSqlParam("p2", TarID)
    .WithSqlParam("p3", ID)
    .ExecuteStoredProc<PutEstacionDTO>();
  return Ok();

当我只调试'select'= 0（TarID）时。

编辑，添加数据表的：items =“items” 数据：

      items: [
              {
      id: "",
      grupo: "",
      numeroEstacion: "",
      clave: "",
      nombre: "",
    }
  ],

设置项目的方法：

axios
      .get("http://localhost:58209/api/GetEstaciones", {
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token")
        }
      })
      .then(response => {
        console.log(response);
        this.items = response.data;
        this.snackbar = true;
        this.textSnackbar = "Se han cargado correctamente las estaciones";
      })
      .catch(error => {
        console.log(error.response);
        this.snackbar = true;
        this.textSnackbar =
          "Lo sentimos, no pudimos cargar la información de los tanques";
      });

如何获得Vuetify Select的价值？

0 个答案: