CODEWITHSUNDEEP
javascriptcomponentsvue.js
Kamuran Sönecek
Kamuran Sönecek

Reputation: 3333

Dynamic Component Element Not Works in Vue.js

I faced a problem which made me mad. I try to make a dynamic component But it is not work. Vue detect my first and second component but it not detect the others.

this is my index html 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Kamuran Vue Test</title>
</head>
<body>
    <app-header>
</app-header>
test
    app-header

    <app-header></app-header>

    <component is="{{view}}"></component>


    <app-footer></app-footer>


    <app-form form="login"></app-form>

</body>
<script src="build.js"></script>
</html>

also my main.js 

var $    = require('jquery')
var page = require('page')
var Vue = require('vue')

var vue = new Vue({
  el: 'html', 
  data: {
    view: 'home'
  },
  components: {
    'app-footer'   :   require('./components/footer'),
    'app-header'   :   require('./components/header'),
    'app-form'     :   require('./components/form'),
    'home'         :   require('./views/home'),
    'login'        :   require('./views/logins'),
    'contact'      :   require('./views/contact')
  } 
});

page("*", function(ctx){
  if(ctx.path != "/"){
    vue.view = ctx.path.substr(1);
  } else {
    vue.view = "home"
  }

  console.log(vue.view)

});
page();

I cant see any error warning about js as building build.js or on console.

element not work, even though I set its value as app-header.

app-header and app-footer work perfectly as use them an element but other components not work. Is there another package to work them ?

what is go wrong, I do not understand.

Upvotes: 1

Views: 524

Answers (1)

Kamuran S&#246;necek
Kamuran S&#246;necek

Reputation: 3333

finally, I found the answer. When I build "build.js" I used browserify. It caused the problem. Clear all my node modules and re-install them with webpack, then I re build the js file and problem solved.

Upvotes: 1

Related Questions