vuejs - dynamic added dom element not rendered

Question

i have a series of div added after mounted:

  mounted(){
   // let self = this

    let connect = document.querySelector('.connect')
    let h2 = 97.5;

    connect.setAttribute('style','width:60px; height:'+h+'px')

    var i;
    for(i = 0 ; i < 8 ; i++ ){
      let linker_node = document.createElement('div')
      linker_node.setAttribute('style','width:60px; height:'+ h2 +'px')
      i%2 ? linker_node.setAttribute('class','linker toplink'):linker_node.setAttribute('class','linker bottomlink')
      connect.appendChild(linker_node)
    }

and my css:

  .toplink{
    background:#fff;
  }
  .bottomlink{
    background:grey;
  }

which finally I will get html:

<div data-v-57e2cc88="" class="connect" style="width:60px; height:780px">
    <div class="linker bottomlink" style="width:60px; height:97.5px"></div>
    <div class="linker toplink" style="width:60px; height:97.5px"></div>
    <div class="linker bottomlink" style="width:60px; height:97.5px"></div>
    <div class="linker toplink" style="width:60px; height:97.5px"></div>
    <div class="linker bottomlink" style="width:60px; height:97.5px"></div>
    <div class="linker toplink" style="width:60px; height:97.5px"></div>
    <div class="linker bottomlink" style="width:60px; height:97.5px"></div>
    <div class="linker toplink" style="width:60px; height:97.5px"></div>
</div>

but the css background did not rendered. i check chrome inspect:

as the image shown, the class toplink/bottomlink did not show up at all.

I believe this is something to do with vue life cycle hook, but not sure how to debug it.

How can I resolve this?

score 0 · Answer 1 · answered May 15 '20 at 20:14

Your code seems to be working fine:

new Vue({
  el: "#app",
  mounted() {
    // let self = this

    let connect = document.querySelector('.connect')
    let h2 = 97.5;

    connect.setAttribute('style', 'width:60px; height:' + h2 + 'px')

    var i;
    for (i = 0; i < 8; i++) {
      let linker_node = document.createElement('div')
      linker_node.setAttribute('style', 'width:60px; height:' + h2 + 'px')
      i % 2 ? linker_node.setAttribute('class', 'linker toplink') : linker_node.setAttribute('class', 'linker bottomlink')
      connect.appendChild(linker_node)
    }
  }
});

.toplink {
  background: #fff;
}

.bottomlink {
  background: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <div class='connect'>

  </div>
</div>

score 0 · Answer 2 · answered May 15 '20 at 23:53

I found the solution from this link:

In both cases CSS changes are not taking effect because elements you are trying to style are not part of your component, and thus don't have data-v-xxxxxxx attribute, which is used for styling elements in the current scope (component) when using . When using scoped attribute we tell the vue to apply css only to elements with data-v-xxxxxxx, but not nested elements. Thus we need to explicitly use deep-selectors.

so I need to use vue-loader's deep selectors >>> in my css class:

>>>.toplink{
    background:#fff;
  }
>>>.bottomlink{
    background:grey;
  }

then everything will render correctly.

vuejs - dynamic added dom element not rendered

2 Answers2