Why is my partial being rendered with the define block?

support
1

Hello, my original problem was that I needed to comment out a partial vue.html in my baseof.html to enable and disable the use of vue. The solution was to create a partial vue_html.html to render the html under the body tag and partial vue.html the javascript code above the ending body tag since I can’t figure out how to get it all into one partial.

The problem now is that I’m rendering partial vue.html without even including it in the baseof.html, not sure if I’m using the blocks wrong? This is a bare bones website with no configuration. My vue.html is being rendered. When I remove the {{define “body”} from the vue.html partial it works as expected.

baseof.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
 {{ block "body" . }}
{{ end }}

{{ block "main" . }}
{{ end }}
</body>
</html>

index.html

{{ define "main" }}
{{ .Content }}
{{ end }}

vue.html partial

{{ define "body" }}
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<div id="demo"> ${count}<br>
	<p  v-html="htmlString"> </p>
	<a class="button is-danger" @click.prevent="incrementCounter">Count Up</a>
</div>


<script type = "text/javascript">
let data = {
    count: 0,
	htmlString: "<p style='color:red'>My Counter</p>"
}

let demo = new Vue({
    el: '#demo',
    delimiters: ['${', '}'],
    data: data,
	methods: {
	incrementCounter: function() {
            this.count += 1;
        }
    },
});
</script>

{{ end }}

vue_html.html This is just an extra partial that I made that I’m thinking about using since I don’t know how to include all the vue code into one partial.

<div id="demo"> ${count}<br>
	<p  v-html="htmlString"> </p>
	<a class="button is-danger" @click.prevent="incrementCounter">Count Up</a>
</div>

Thinking about using the above like this in base.html

<body>
{{partial "vue_html.html"}}
 {{ block "body" . }}
{{ end }}

{{ block "main" . }}
{{ end }}
{{partial "vue.html"}}
</body>

I have nothing for single or list templates, this is bare bones for testing.

Thanks in advance

2

Hello,

I wouldn’t use the block define "body" within the vue.html partial as you’re doing above.

Instead I would use it in a page template like so:

{{ define "body" }}
{{ partial "vue.html" . }}
{{ end }}
3

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.