在 vue.js 中推送和拼接不更新或删除

Posted 2023-02-23

【中文标题】在 vue.js 中推送和拼接不更新或删除

【英文标题】：Push and splice not updating or deleting in vue.js

【发布时间】：2020-11-02 00:16:18

【问题描述】：

我正在尝试使用数组和 Vue v-for 循环制作表单转发器。但我无法推动或切割阵列中的任何东西。我得到了一些警告。 TypeError：无法读取未定义的属性“项目”

这是我的代码

<template>
  <b-form @submit.prevent="repeateAgain">
     <b-row
      v-for="(item, index) in items"
      :id="item.id"
      :key="item.id"
     >
       <b-col>
         <b-form-group>
           <b-form-input
            placeholder="Email"
           />
        </b-form-group>
      </b-col>
      <b-col>
        <b-form-group>
          <b-form-input placeholder="Email" />
        </b-form-group>
      </b-col>
      <b-col>
        <b-form-group>
           <b-form-input placeholder="Email" />
        </b-form-group>
      </b-col>
      <b-col>
        <b-form-group>
          <b-button
           variant="outline-danger"
            @click="removeItem(index)"
           >
            <i class="feather icon-x" />
             <span class="ml-25">Delete</span>
           </b-button>
         </b-form-group>
       </b-col>
     </b-row>
        <hr>
     <b-form-group>
       <b-button
         variant="primary"
         @click="repeateAgain"
        >
         <i class="feather icon-plus" />
         <span class="ml-25">Add</span>
       </b-button>
     </b-form-group>
  </b-form>
</template>

<script>
import 
  BForm, BFormGroup, BFormInput, BRow, BCol, BButton,
 from 'bootstrap-vue'

export default 
  components: 
    BForm,
    BRow,
    BCol,
    BButton,
    BFormGroup,
    BFormInput,
  ,
  data: () => (
    items: [
      id: 1,
      title: 'Do the dishes',
    ,
    
      id: 2,
      title: 'What to do ?',
    ],
    newTodoText: '',
    nextTodoId: 2,
  ),
  methods: 
    repeateAgain: () => 
      this.items.push(
        id: this.nextTodoId += +this.nextTodoId,
        title: this.newTodoText,
      )
      this.newTodoText = ''
    ,
    removeItem: index => 
      this.items.splice(1)
      console.log(index)
    ,
  ,

</script>

我也尝试使用 slice 方法删除特定行，但它不起作用。 我忘记了什么？？

【问题讨论】：

尝试将所有函数从 removeItem: index => () 更改为 removeItem() ，包括 data() return ...

@digout 感谢它现在的工作。但是当我尝试单击第一个删除它的全部删除时？ ```` removeItem(index) this.items.splice(index) ,````

this.items.splice(index, 1) - 第二个参数告诉你要删除多少元素（从索引中）。省略该参数意味着您要从索引中删除其余参数。

【参考方案1】：

您不应该在 Vue 中为 data 或 methods 使用箭头函数，因为箭头函数有自己的上下文 (this)

repeateAgain: () => 
      this.items.push(

在调用repeateAgain 方法的情况下，this 上下文未定义 - 这就是错误发生的原因** TypeError: Cannot read property 'items' of undefined (this)**

你应该这样修改它：

repeateAgain() 
      this.items.push(

---

更新

@submit.prevent="repeateAgain" - 这就是我所说的“场合”。另一方面，由于该方法没有绑定到methods: 对象，而是绑定到相对上下文（这里没有 - 未定义），如果它在一个类中，那么类实例就是上下文。

例如：（仅供演示，请勿使用此模式）

在以下示例中，this 上下文是 MyWrappedCmp 的一个实例

import 
  BForm, BFormGroup, BFormInput, BRow, BCol, BButton,
 from 'bootstrap-vue'

class MyWrappedCmp 
  getComponent()
    return 
      methods: 
        repeateAgain: () => 
          // “this” context is an instance of MyWrappedCmp
          // ...
         
      
    


const myWrapped = new MyWrappedCmp()

export default myWrapped.getComponent()

【讨论】：

你能解释一下你在某个场合说的话是什么意思吗？您能否举例说明何时、如何或为什么？

更新了解释它的答案。