Name: & amp; nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;  
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 
 Gender: & lt; The label for="exampleInputPassword3" & gt;  
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 
 Date of birth: & lt; The label for="exampleInputPassword3" & gt;  
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 
 Subordinate to the party: & lt; The label for="exampleInputPassword3" & gt;  
 & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 

 
 

 
/* * vue components/
Vue.com ponent (' member - info, {
The template: '# TMP, 
Props: [' content ', "index"], 
Methods: {
Btn_delete: function () {
Alert (enclosing index); 
This $emit (" delete ", enclosing the index) 
}, 
}//the methods END 
}); 

Var=new vm Vue ({
El: '# vue_div', 
Data: {
Counter: [], 
}, 
Methods: {
/* add a party member information button is clicked, it will insert a new component */
Btn_add: function () {
This. Counter. Push ({}); 
}, 
Btn_delete: function (index) {
Alert (" delete "); 

This. Counter. Splice (index of 1) 

}, 
}//the methods END 
});//new Vue END 

the above code is click on the id="btn_add" button will generate a component, and then click the id="btn_delete" button will remove the current click components, but always delete the last one, the index subscript is right, how do I change? Thank you very much!

CodePudding user response:

You want to delete the component is the parent of an array, use this. $emit (" ") call member - delete the current method removes the index of the info

CodePudding user response:

: key do not bind the subscript, you can add methods btn_add, to push the object manually add a index, the value of this. Counter. The length, then: key="item. The index"

CodePudding user response:

Speak, you so many blank characters in MemberInfo... , should use margin margin, ah, and, now that is v - for generated, certainly cannot specify the id attribute, otherwise a lot of the same id, this is not standard,

And you're not the MemberInfo processed everything? Directly transmit the counter in line with props, v - for, delete something inside all finished

If you just to be like this, because your structure is very simple, also don't have much similar function button, so the delete button, people prefer a slot in them, and then delete events directly in the parent component definition and calls can, need not emit forward, after all, it was attributable to the parent component of an event