如何删除一个动态生成的表单基于点击删除按钮相对于其ID在vuejs2

我正在创建一个应用程序使用Quasar和VueJS。我能够生成添加按钮的点击一个动态的形式，但不能删除基于删除button.Find下面的代码的点击任何新生成的形式：如何删除一个动态生成的表单基于点击删除按钮相对于其ID在vuejs2

<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>

来源

2017-07-03 swathi

您是否收到任何错误？什么是您使用的vue版本？ –

'useRemoveFromProject（1）'所以键总是1？你确定吗？（对我来说，这意味着它只会删除第二个元素，如果存在的话）。也许看看当前元素的索引？ –

看后你的代码我注意到，你有一些错误：元素不仅删除按钮

呼叫上点击时

呼叫功能useRemoveFromProject没有“用户”
呼叫userRemoveFromProject的“R”与'我'变量，但'我'是什么？
为什么要使用双重v-for？第一级就够了。

我向你推荐一个小提琴的工作例子。请让我知道它对你是否有用（如果是这种情况，请将其标记为已解决）。

编辑：为Vue.js 2 https://jsfiddle.net/86216oko/

来源

2017-07-03 12:48:19

如何删除一个动态生成的表单基于点击删除按钮相对于其ID在vuejs2

回答

相关问题