CODEWITHSUNDEEP
javascripthtmlvue.js
jessica
jessica

Reputation: 1

Cant handle model in Vue.js

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>

Upvotes: 0

Views: 48

Answers (1)

seethrough
seethrough

Reputation: 752

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>

Upvotes: 2

Related Questions