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

Question

我有一个应用程序，它从一些输入字段接收数据并填充一个表，而不通过后端，它是一个要保存在数据库中的记录列表，我可以毫无问题地挂载该列表。

问题是，我需要随时编辑或排除此列表中的任何项目，但我不能这样做，因为我无法获取列表中该项目的索引。

我尝试了很多方法，在模板标签内的 col 标签内使用 v-for（顺便说一下，我正在使用 bootstrap-vue）但没有奏效，我试图得到这个使用 this.data[index] 进行索引，但未定义。

对于排除，我使用 this.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

我认为最简单的方法是在您将每个项目加载到 data 属性时，人为地为每个项目引入一个 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>

现在工作。

谢谢大家。