如何在Vue中获取不是来自数据库的数组索引

Question

我有一个应用程序，它从一些输入字段接收数据并填充一个表，而不通过后端，它是一个要保存在数据库中的记录列表，我可以毫无问题地安装该列表。问题是，我需要随时编辑或排除此列表中的任何项目，但是，我不能这样做，因为我无法在列表中获取此项目的索引。我已经尝试了很多方法，在模板标签内的 col 标签内使用 v-for（顺便说一下，我正在使用 bootstrap-vue）并且没有用，我尝试使用这个来获取这个索引. 数据[索引] 并且未定义。对于排除，我使用这个。data .splice(index, 1) 但这会排除列表中的第一条记录，这是已经预料到的，如果我取出“1”，它会排除整个列表。这是代码：这是我的 b 表：<b-table id="listTable" bordered hover striped :items="filtered" :fields="fields" small>                                    <template v-slot:cell(actions)="data">                    <b-button variant="warning" >                        <i class="fa fa-pencil"></i>                    </b-button>                    <b-button variant="danger" @click="deleteTask(data.item)" class="mr-2">                        <i class="fa fa-trash"></i>                    </b-button>                </template>            </b-table>那是填充表的函数，它转到后端并返回数据：populateList(){        this.pecaList.peca = this.peca.peca        this.pecaList.qnt = this.peca.qnt        this.pecaList.vlUnit = this.peca.vlUnit        this.pecaList.vlTot = this.peca.vlUnit * this.peca.qnt    }createPecaList(e) {        axios.post(this.rotalistapeca, this.pecaList)            .then((res) => {                this.peca.list.push(res.data)                this.pecaList = {}            })            .catch((err) => {                console.log(err)                alert("Try again");            });    }这是后端（Laravel）上的功能：public function createList(Request $request){    $totValue = $request->qnt * $request->vlUnit;    $dados = [        'peca' => $request->peca,        'qnt' => $request->qnt,        'vlUnit' => $request->vlUnit,        'vlTot' => $totValue    ];    if($dados){        return response()->json($dados);    } else {        return ('Something went wrong');    }}我是 Vue 和一般开发的新手，毕竟我怎样才能获得这个索引？如果这些数据首先进入后端并返回，它可能更容易使用，但这不是我想要做的，我想在不将数据传递到后端的情况下获取这个索引。任何帮助将不胜感激。

Answer 1

我认为最简单的方法是在将每个项目加载到数据属性时人为地为每个项目引入一个 ID属性。

这样的事情可能很好：

new Vue({

  el: "#app",

  data: {

    pecaList: []

  },

  methods: {

    fetchData() {

      return fetch('https://jsonplaceholder.typicode.com/todos')

        .then(response => response.json())

        .then(json => {

          // console.log(json)

          // creating another ID, based on the current list index

          return json.map((e, i) => {

            return { ...e,

              addedId: i

            }

          })

        })

    },

    deleteThis(id) {

      this.pecaList = this.pecaList.filter(e => e.addedId !== id)

    }

  },

  async mounted() {

    this.pecaList = await this.fetchData()

  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <h3>Click on the list items to delete them one by one</h3>

  <ul>

    <li :key="peca.id" v-for="peca in pecaList" @click="deleteThis(peca.addedId)">{{peca.addedId}} {{peca.title}}</li>

  </ul>

</div>

模型数据已经有一个id属性，所以我添加了一个名为addedId的 ID 。从那时起，这个addedId标识您的项目（不管它在表或列表中的索引；直到您获取另一组数据或重新加载，或类似的东西），因此您可以将其用于删除。

实际上，不建议在列表中使用项目索引进行识别 - 它可以更改（如排序或过滤），因此无论何时要使用 ID，请确保它在所有用例中正确识别项目。

Answer 2

我找到了一种方法来完成我需要做的事情，不像我想要的那样，但它有效，只需将我的 b-table 更改为 b-list-group。

它的结尾是这样的：

<b-list-group>

                <b-list-group-item v-for="(item, index) in peca.list">

                    <strong>Item: </strong>{{ index }}

                    <strong>Peça: </strong>{{ item.peca}}

                    <strong>Quantidade: </strong>{{ item.qnt}}

                    <strong>Valor Unitário: </strong>{{ item.vlUnit }}

                    <strong>Valor total: </strong>{{ item.vlTot }}

                    <b-button variant="warning" >

                        <i class="fa fa-pencil"></i>

                    </b-button>

                    <b-button variant="danger" @click="deleteTask(index)" class="mr-2">

                        <i class="fa fa-trash"></i>

                    </b-button>

                </b-list-group-item>

            </b-list-group>

现在工作。