Pu sh и сварка не обновляется или не удаляется в vue. js - PullRequest
Новая
       77

Pu sh и сварка не обновляется или не удаляется в vue. js

1 голос
/ 12 июля 2020

Я пытаюсь сделать репитер формы, используя массив и Vue v-for l oop. но я не мог сделать sh или разрезать что-либо в моем массиве. Я получил предупреждение. 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>

Я также пытаюсь удалить конкретную строку, используя метод среза, но он не работает. Что я забываю ??

1 Ответ

2 голосов
/ 12 июля 2020

Вы не должны использовать стрелочные функции для data или methods в Vue, потому что стрелочные функции имеют свой собственный контекст (this) 

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

В случае, когда repeateAgain вызывается метод, this контекст не определен - поэтому возникает ошибка ** TypeError: Невозможно прочитать свойство 'items' из undefined (this) **

Вы должны изменить его следующим образом: 

repeateAgain() {
      this.items.push({

Обновление

@submit.prevent="repeateAgain" - вот что я имел в виду под «случаем». Поскольку метод не привязан к объекту methods: {, но привязан к относительному контексту (здесь нет - не определено), с другой стороны, если он находится внутри класса, экземпляр класса будет контекстом.

Например, : (только для демонстрации, не используйте этот шаблон)

В следующем примере this context является экземпляром 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()
...