Question

我正在按照教程制作拳击游戏here。我做的一切都很正确。

    new Vue({
el:'#punch_game',
data:{
  health:100,
  ended:false
},
methods:{
  punch:function(){
    this.health-=10;
    if(this.health <=0){
      this.ended=true;
    }
  },
  restart:function(){
    this.health=100;
    this.ended=false;    
  }
}
} <---- REMOVING THIS NEEDED bracket MAKES THE Vue instance incomplete, but renders page fine! 
  <------Keeping it stops vue from rendering page altogether! Why?
);

它提供此图像，控制台确实指示错误，需要括号缺失 - 但至少我可以看到一些按钮和Vue DOES RENDER罚款！< / p>

在这里，我在main.js中有正确的括号 - vue实例是完整包含所有括号，但它会使所有内容消失并显示此错误消息：< / p>

放大：

    vue.js:597 [Vue warn]: Failed to generate render function:

    SyntaxError: Unexpected token } in

    with(this){return _c('div',{attrs:{"id":"punch_game"}},[_c('div',{staticClass:"{burst:ended}",attrs:{"id":"bag","":}})
,_v(" "),_c('div',{attrs:{"id":"bag_health"}},[_c('div',{style:({width:health + '%'})})]),_v(" "),_c('div',{attrs:{"id":"controls"}}
,[_c('button',{directives:[{name:"show",
rawName:"v-show",value:(!ended),expression:"!ended"}]
,on:{"click":punch}},[_v("punch")]),_v(" "),_c('button',{on:{"click":restart}},[_v("restart")])])])}


    (found in <Root>)

这是一个神秘的heisen bug ..

Answer 1

您的小提琴有几个问题，但错误来自您错误的v-bind使用中的空格：

<div id="bag" v-bind: class="{burst:ended}"></div>

v-bind:和class之间不应有任何空格。另外，如果你想以百分比呈现宽度，我想你应该使用v-bind:style="{ width: health + '%' }"而不是health - '%'？

你的小提琴也被打破，因为你加载了不正确的资源（我不明白为什么包含一个HTML页面会做任何事情），而且JSFiddle已经将你所有的标记包装在<body>元素中，所以你不能简单地将页面的整个<html>标记复制并粘贴到其中。

在此处查看您的固定小提琴：https://jsfiddle.net/bogbocwn/24/

为什么删除必要的“}”会产生错误，但是错误地渲染页面[vue js]？

1 个答案: