javascript - 如何在Vue中获取不是来自DB的数组索引

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 时，请确保它在所有用例中都能正确标识项目。