matiascx's avatar

why dynamically mounted vue components does not appear in devtool?

Hi, everyone, I am testing following scenario: I have created one component which will be dynamically mounted to a dom with some id; when i click one element(which has a @click handler bound with it, i will initiate that component and mount it into dom. My question is: I have inspected in the devtool, that new inserted vue component can not be seen as a child of root vue instance. What is the problem? Is this the normal case or what i have done wrong with? Please see following code: http://jsbin.com/fikida/edit?html,js,console,output

Thanks~!

0 likes
5 replies
matiascx's avatar

Hi, everyone, I am testing following scenario: I have created one component which will be dynamically mounted to a dom with some id; when i click one element(which has a @click handler bound with it, i will initiate that component and mount it into dom. My question is: I have inspected in the devtool, that new inserted vue component can not be seen as a child of root vue instance. What is the problem? Is this the normal case or what i have done wrong with? Please see following code: http://jsbin.com/fikida/edit?html,js,console,output

Thanks~! here is the code:

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="root" >
    <div @click="onclick">this is root</div>
</div>
<script type="x/templates" id="comp">
  this is dynamically mounted component
</script>
<script>
    
    new Vue({
      el: "#root",
      methods: {
        onclick: function(e){
        var subcomp = Vue.extend({
          template: "#comp",
          data: {
            subcompdata: "sub component data"
          }
        });
        new subcomp().$mount(e.target);
        }
      },
      data: {
        rootcompdata: "root vue data"
      }
    });
</script>
</body>
</html>
matiascx's avatar

@mehany , I have not posted onto vue forum yet. It is very strange, i have never received the email verification on vuejs.org forum, so i can not post on their forum.

jimmck's avatar

Your template is part of the actual instance HTML? Never seen that. Where is the component definition? You can dynamically attach a template by setting it directly.

            var lissa = this.makeTemplate($('#listbox-template').html(), 'list_box', this.id);
            console.log(lissa);
            this.$options.template = lissa;
            //this.list = $(("#" + this.id));
            //alert(this.id);
        },
        methods: {
            makeTemplate: function (temp, target, id) {
                var replacer = (new StringReplacer())
                        .add(target, new Replacement(id))
                        .add('complist', new Replacement(id, Replacement.APPEND, 'complist'));
                return replacer.replace(temp);
            },

You search the Vue Forum for the articles.

matiascx's avatar

@jimmck , in my test case, the dynamically inserted component's template is not part of root vue instance's html. Is that caused dynamically inserted component not children of root vue instance in the dev tool? I am a little not clear about it.

Please or to participate in this conversation.