Home>

i want to duplicate and delete html elements with vue directives using vue

I am a beginner studying various things
Thank you.

Error message

Thank you for I want to delete myself and my parent by pressing button using vue
I wanted to apply it, but it doesn't work.

Applicable source code 

// In the beginning, the following div elements are hidden
 
   <button @ click = "deleteDom">Delete</button>
 
<button @ click = "addDom">Increase</button>

Press the button to increase

 
   <button @ click = "deleteDom">Delete</button>
 
 
   <button @ click = "deleteDom">Delete</button>
 
 
   <button @ click = "deleteDom">Delete</button>
 
 
   <button @ click = "deleteDom">Delete</button>
 
<Button @ click = "addDom">Increase</button>

And remove class = "dispNone" and duplicate or press the delete button (@ click = "deleteDom)


   <Button @ click = "deleteDom">Delete</button>
 
<Button @ click = "addDom">Increase</button>

Or delete like
. dispNone {
  display: none;
}
window.Vue = require ('vue');
const app = new Vue ({
    el: '#app',
    data: {},
    methods: {
AddDom: function () {
          // I want to draw a method for the button to remove the class here and increase it, but I'm not sure.
        }
      deleteDom: function (e) {// For deletion. I have diverted something that was referred to in previous questions.
            var del = e.target.parentNode;
            del.parentNode.removeChild (del);
        }
    }
Supplemental information (FW/tool version etc.)

I am a beginner. Please point out any missing knowledge or information.

html css vue.js button
  • Answer # 1

    There is yambejp's answer, so I will tell you another way to answer vue.

    
  
    
    
      {{item.name}}
    
    
    
  
  

    const DATA_TEMPLATE = {
  name: 'sample',
  value: 1
}
new Vue ({
  el: '#app',
  data () {
    return {
      items: []
    }
  },
  methods: {
    add () {
      this.items.push (DATA_TEMPLATE)
    },
    remove (index) {
      this.items.splice (index, 1)
    }
  }
})

    Vue and other frameworks feature bi-directional binding and are suitable for controlling HTML rendering in synchronization with data, so if you want to create this behavior by directly manipulating the DOM I think it ’s smarter alone.

  • Answer # 2

    I'm sorry! Almost dom processing without vue-likeness
    add can be anything, but del is troublesome to let the added one inherit
    Inherited from parent element

    
  
    
  
  

Related articles