Блог

Я хочу добавить динамическую строку в таблицу с одним столбцом в качестве автозаполнения, а два других — в виде текстового поля. Состояние двух других столбцов поддерживается, а также могут быть извлечены значения. Но для выпадающего списка автозаполнения при нажатии кнопки добавить новую строку оно исчезает из всего автозаполнения.

при нажатии кнопки добавить новое значение, выбранное в динамическом сгенерированном значении столбца, исчезает. Было бы здорово, если бы я мог добавить одно автозаполнение сверху и при выборе элемента и сгенерировать динамическую строку с редактируемым текстовым полем qty и price.

 <template>
      <v-content id="purchaseOrder-line">
        <v-card raised>
          <v-card-actions>
            <h2>Purchase Order List</h2>
            <v-spacer></v-spacer>
            <v-row
              ><v-autocomplete
                v-model="select"
                :items="products"
                :loading="loading"
                :search-input.sync="search"
                color="white"
                hide-no-data
                item-text="productname"
                item-value="Id"
                label="Search Product"
                placeholder="Start typing to Search"
                return-object
                solo
              ></v-autocomplete
            ></v-row>
            <div class="my-2">
              <v-btn class="normal" :text="true" @click="addNewRow()">
                <v-icon>mdi-plus</v-icon>Add
              </v-btn>
              <v-btn class="primary" :text="true" @click="deleteAll()">
                <v-icon>mdi-delete-empty</v-icon>Delete All
              </v-btn>
            </div>
          </v-card-actions>
          <v-card-text>
          
            <div class="table-responsive">
              <table id="LeadLineTable" class="table table-striped table-bordered">
                <thead>
                  <tr>
                    <th>Product</th>
                    <th>Qty</th>
                    <th>Price</th>
                    <th>Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(pline, index) in purchaseOrderLine" :key="index">
                    <td>
                      <v-autocomplete
                        v-model="pline.product"
                        :items="products"
                        :loading="loading"
                        :search-input.sync="search"
                        color="white"
                        hide-no-data
                        item-text="productname"
                        item-value="Id"
                        label="Search Product"
                        placeholder="Start typing to Search"
                        return-object
                        solo
                      ></v-autocomplete>
                    </td>
                    <td>
                      <v-text-field
                        v-model="pline.qty"
                        solo
                        label="Qty"
                        clearable
                      ></v-text-field>
                    </td>
                    <td>
                      <v-text-field
                        v-model="pline.price"
                        solo
                        label="Price"
                        clearable
                      ></v-text-field>
                    </td>
                    <td>
                      <v-btn
                        class="mx-2 waves-effect waves-block delete-po"
                        @click="deleteRow(index)"
                        :text="true"
                        small
                        fab
                        dark
                        color="teal"
                      >
                        <v-icon small>mdi-delete-empty</v-icon>
                      </v-btn>                
                    </td>
                  </tr>
                  <tr v-show="purchaseOrderLine.length == 0">
                    <td
                      colspan="5"
                      style="
                        text-align: center;
                        height: 100px;
                        vertical-align: middle;
                      "
                    >
                      No record available
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </v-card-text>
          <v-card-actions>
            
    
            <br />
            <button v-show="purchaseOrderLine.length" type="button" @click="save">
              Save
            </button>
          
          </v-card-actions>
        </v-card>
      </v-content>
    </template>
    <script lang="ts">
    import Vue from "vue";        
    export default Vue.extend({
      name: "purchaseOrder-line",
      props: {
        msg: String,
      },       
      data() {
        return {
          output: "",
          purchaseOrderLine: [] as PurchaseOrderLine[],
          line: {} as PurchaseOrderLine,
          headers: [
            {
              text: "Product",
              align: "start",
              sortable: false,
            },
            { text: "Qty" },
            { text: "Price" },
            { text: "", value: "actions", sortable: false },
          ],
          totalRecords: 0,
          products: [] as Product[],
          result: {} as APIResponse<Product>,
          loading: true,
          search: "",
          select: null,
        };
      },
      watch: {
        search(val) {
          val amp;amp; val !== this.select amp;amp; this.getProductList(val);
        },            
      },        
     
      mounted() {
        this.getProductList("");
      },
      methods: {
        deleteAll() {
          this.purchaseOrderLine = [];
        },
        addNewRow() {
          this.line = {} as PurchaseOrderLine;
          this.purchaseOrderLine.push(this.line);
        },
        deleteRow(_index) {
          this.purchaseOrderLine.splice(_index, 1);
        },
        cloneRow(_index) {
          this.purchaseOrderLine.splice(
            _index   1,
            0,
            this.purchaseOrderLine[_index]
          );
        },
        save() {
          console.log(JSON.stringify(this.purchaseOrderLine));
          this.output = JSON.stringify(this.purchaseOrderLine);
        },
        async getProductList(value) {
          
        },
      },
    });
    </script>
    <style>
    </style>
 

Пожалуйста, приведите какой-нибудь пример для этого.