DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

[zigomir]

Vue.js version

2.0.0-beta.7

Steps to reproduce

Use browserify-simple-2.0 or webpack-simple-2.0 vue cli template with hot module replacement. Hard reload won't reproduce this issue.

<template>
  <div id="app">
    <div v-for="item in 10">
      <!-- Without :key in span tag, when you reduce the range (e.g.: from 10 to 5) error will occur. When increasing range error is not present. -->
      <span>M</span>
      <!-- <span :key="item">M</span> -->
    </div>
  </div>
</template>

What is Expected?

Use hmr without a need to use :key on static element?

What is actually happening?

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. is thrown whenever you reduce v-for range and you don't provide :key property to static element inside v-for.

[moonlik]

@yyx990803 I have the same issue with the modal window. Don't know what I'm doing wrong

Vue.js version

2.1.6

Steps to reproduce

Use vue-loader v10.0.0

Modal.vue

<template>
  <div class="modal is-active has-text-centered">
    <div class="modal-background"></div>
    <div class="modal-card">
      <section class="modal-card-body">
        <slot></slot>
      </section>
    </div>
    <button class="modal-close" @click="$emit('close')"></button>
  </div>
</template>

<script>
export default {
  mounted () {
    document.getElementById('app').appendChild(this.$el)
  }
}
</script>

Something.vue

<template>
  <section class="section">
    <div class="container">
      <modal v-if="showModal" @close="showModal = false">
        <p>Some text here</p>
      </modal>
      <a class="button is-primary modal-button" @click="showModal = true">Show modal</a>
    </div>
  </section>
</template>

<script>
import Modal from './ui/Modal'

export default {
  data: function () {
    return {
      showModal: false
    }
  },
  components: {
    Modal
  }
}
</script>

What is Expected?

When click on the close button, it should close the modal window.

What is actually happening?

Console shows me the error DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

[fnlctrl]

@moonlik Please follow the Issue Reporting Guidelines and provide a live reproduction on jsfiddle, codepen etc, then open a separate issue. Thanks!

[moonlik]

@fnlctrl ok, sorry.

[fabien-lg]

@moonlik I had the same issue, and moved the component call at the top of the template and it worked…

[carvalhoviniciusluiz]

I'm having the same problem

my store.js

const state = {
    forms     : []
}

const mutations = {
    ADD_FORM (state, newForm) {
      state.forms.push(newForm)
    }
}

const actions = {
    listForm: (context) => {
        Vue.http.get('form_models').then(resp => {
            $.each(resp.body, (i, data) => {
              const form = {
                      id  : data._id
                    , data: data.data
                    , html: data.html
                  }
              context.commit("ADD_FORM", form)
            })
        })
    }
}

my component.vue

<template>
  <table>
    <tbody>
      <tr v-for="(form,index) in forms"></tr>
    </tbody>
  </table>
</template>
<script>
  export default {
      created(){
          this.$store.dispatch('listForm')
      }
    , computed: {
          forms(){
              return this.$store.state.easyForms.forms
          }
      }
  }
</script>

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

How to solve this problem ?

[LinusBorg]

Please dont comment on old, closed(!) issues over and over. The original issue was fixed, so if your problem is a bug, it's likely not the same thing, and you should either ask for help on the forum or open a new issue for a proper bug report with an interactive reproduction.