Vue.Js Beginner about Component

Question

I have a little problem with my code and need some advice.

I try to simulate a diceroll with Vue.js. To be sure any diceroll is different, i want to create a component for that. I use that code for my app.js

Vue.component('diceroll', {
  template: 'This is the result !' + diceroll,
  data: function() {
    return {
      diceroll: 0
    }
  },
  methods: function(){
     diceroll: Math.floor(Math.random() * 6) + 1;
  }
}
)

var demo = new Vue( {

  el: ' #demo',
}
)

Obviously, it don't work and i don't understand how to do that. I read the doc and watch the laracast's series but...

Someone can help me on this ? ^^

AJF · Accepted Answer · 2015-09-20 15:32:13Z

4

"methods" in Vue are actually objects (key-value pair) where the value is a function. Also, inside the template you have to refer variables using mustache binding like this: {{ vName }}.

I made example: (here is a jsbin demo)

Vue.component('diceroll', {
  template: 'This is the result: {{diceroll}}',
  data: function() {
    return {
      diceroll: 0
    };
  },
  methods: {
    roll: function() {
      this.diceroll = Math.floor(Math.random() * 6) + 1;
    }
  },
  ready: function() {
    this.roll();
  }
});

var demo = new Vue({
  el: '#demo'
});

<script src="http://vuejs.org/js/vue.js"></script>
<div id="demo">
  <diceroll></diceroll>
</div>

edited Sep 20, 2015 at 15:32

AJF

11.9k2 gold badges41 silver badges64 bronze badges

answered Jun 25, 2015 at 5:36

Miikka

412 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.Js Beginner about Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related