Error in component compilation using vue in beego framework

such a web page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>

<body>
<div id="example-2">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
</div>

<script>
    var data = { counter: 0 }

    Vue.component("simple-counter", {
        template: "<button v-on:click="counter += 1">{{ counter }}</button>",
        //  data  Vue 
        // 
        data: function () {
            return data
        }
    });

    new Vue({
        el: "-sharpexample-2"
    })
</script>
</body>
</html>

in router


func init() {
    beego.Router("/arcTest.html", &controllers.ArcTestController{}, "*:Arc")
}

in controller

func (c *ArcTestController) Arc() {
    c.TplName = "arcTest.html"
}

there is no problem running the html page alone
put it in the beego framework
bee run
[E] [template.go:174] parse template err: arcTest.html template: arcTest.html:20: function "counter" no
t defined
[W] [beego.go:97] template: arcTest.html:20: function "counter" not defined
panic: template: arcTest.html:20: function "counter" not defined

counter can not be used, delete and compile successfully, but clearly defined this example is copied on the vue official website, why beego is compiled but, resulting in the whole project can not run, there is no god knows how to solve, kneel to beg.

Mar.09,2021

if I remember correctly, the placeholder used by beego is'{{}}', which is also used by vue.

then beego will parse it first, and then spit it out to the browser for parsing.

so, beego saw your {{count}}, and you didn't define this in beego, so you reported it wrong.

solution

  1. change the placeholder setting for beego. I don't know how to change it. I don't know anything about beego.
  2. change the placeholder setting for vue.
new Vue({
  delimiters: ['${', '}']
})

//  ES6 

https://cn.vuejs.org/v2/api/-sharp.


how the beego framework installs vue?

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e49396-65331.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e49396-65331.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?