Cant handle model in Vue.js

Question

why cant show {{myGame}},the result should be 超級馬力歐 at first, and will change it when user press the button, but it didn't and it just show {{myGame}} . i dont know how to fix it , thank you !!!

let myApp = new vue({
  
  el:'myApp',
  data:{
     myGame:'超級馬力歐'
  },
  
  methods:{
    
    btnClick: function(pname){
      this.myGame = pname;
    },
  },
  
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  
  <title>JS Bin</title>
</head>
<body>
  
  <div id="myApp" >
    <p> 您最喜歡的遊戲是：{{myGame}}</p>
    
    <button v-on:click="btnClick('我的世界')">我的世界</button>
    <button v-on:click="btnClick('我的世界33')">我的世界33</button>
    <button v-on:click="btnClick('我的世界44')">我的世界44</button>
    <button @click="btnClick('我的世11界')">我的世11界</button>
   
   <script src="https://unpkg.com/[email protected]/dist/vue.js"></script> 
  </div>

</body>
</html>

Have a look at the browser console, your mistakes will show up there. — str
– str, Commented Jun 1, 2018 at 18:17
You reference vue not the way you should, and secondly you reference the app element in a wrong way. Good comment above - always look at your console — seethrough
– seethrough, Commented Jun 1, 2018 at 18:26

seethrough · Accepted Answer · 2018-06-04 03:11:22Z

2

This is the fixed script for you. As a general advice, in future try to read your console and thus figure out the origin of mistake. The problems were that you reference vue not the way you should, and secondly you reference the app element in a wrong way

let myApp = new Vue({
  
  el:'#myApp',
  data:{
     myGame:'超級馬力歐'
  },
  
  methods:{
    
    btnClick: function(pname){
      this.myGame = pname;
    },
  },
  
});

  
  <div id="myApp" >
    <p> 您最喜歡的遊戲是：{{myGame}}</p>
    
    <button v-on:click="btnClick('我的世界')">我的世界</button>
    <button v-on:click="btnClick('我的世界33')">我的世界33</button>
    <button v-on:click="btnClick('我的世界44')">我的世界44</button>
    <button @click="btnClick('我的世11界')">我的世11界</button>
    
  </div>

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

edited Jun 4, 2018 at 3:11

answered Jun 1, 2018 at 18:30

seethrough

7524 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

Cant handle model in Vue.js

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