Как удалить динамически сгенерированную форму, основанную на щелчке по кнопке удаления относительно ее идентификатора в vuejs2

Question

Я создаю приложение, используя Quasar и VueJS. Я могу сгенерировать динамическую форму по нажатию кнопки добавления, но не могу удалить какую-либо из вновь созданных форм на основе нажатия кнопки удаления. Найдите код ниже:

<template>              
<div v-for="h in htmlList">
     <div v-for="r in h" >
         <div v-html="r" v-on:click="useRemoveFromProject(1)" v-bind:id="r.id">
         </div>
    </div>               
</div>
</template>

<script>
/*
 * Root component
 */
import Vue from 'vue'
export default {
  name: 'q-app',
  data () {
    return {
      flag: 0,
      htmlList: [],
      select: 'fb',
      select1: 'fb1',
      multipleSelect: ['goog', 'twtr'],
      usersInProject: [],
      selectOptions: [
        {
          label: 'Google',
          value: 'goog'
        },
        {
          label: 'Select',
          value: 'fb'
        },
        {
          label: 'Twitter',
          value: 'twtr'
        },
        {
          label: 'Apple Inc.',
          value: 'appl'
        },
        {
          label: 'Oracle',
          value: 'ora'
        }
      ],
      selectOptions1: [
        {
          label: 'Integer',
          value: 'goog1'
        },
        {
          label: 'Float',
          value: 'fb1'
        },
        {
          label: 'String',
          value: 'twtr1'
        }
      ]
    }
  },
  methods: {
    useRemoveFromProject: function (id) {
      console.log('hi....')
      Vue.delete(this.htmlList, id)
    },
    identifyMe: function (event) {
      alert('hi - ' + event.target.id)
    },
    process: function () {
      this.flag += 1
      let temp = []
      temp.push('<div class="card" id="a_' + this.flag + '"> <div class="card-content content-center "> <large id="l4">Expression LHS:</large> <input><br> <large id="l5">Operators:</large> <q-select type="radio" v-model="this.select" :options="this.selectOptions"></q-select><br><large id="l4">Expression RHS:</large> <input><br><large id="l5">Data type:</large> <q-select type="radio" v-model="select1" :options="selectOptions1"></q-select><br></div><button class="cordova-hide circular red " style="margin-bottom:5px; margin-right:30px;"  v-on:click="userRemoveFromProject(i)"><i>delete</i></button><input value="click" type="button"> </div>')
      let ids = ['a_' + this.flag]
      console.log(ids)
      this.htmlList.push(temp)
    }
  }
}
</script>

Answer 1

После просмотра вашего кода я заметил, что у вас есть некоторые ошибки:

• Функция вызова useRemoveFromProject без "г" пользователя
• Вызов userRemoveFromProject при нажатии на элемент, а не только кнопку удаления
• Вызов userRemoveFromProject(i) с переменной "я", но что такое "я"?
• Зачем использовать двойной v-for? Первый уровень достаточно.

Я предлагаю вам рабочий пример на скрипке. Пожалуйста, дайте мне знать, если это полезно для вас (и пометьте его как решающий, если это так).

РЕДАКТИРОВАТЬ: для Vue.js 2 https://jsfiddle.net/86216oko/