如何刪除一個動態生成的表單基於點擊刪除按鈕相對於其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

回答

相關問題