Skip to content

Instantly share code, notes, and snippets.

@petermeissner

petermeissner/svg_points_via_vue.html

Last active June 18, 2020 20:59
Show Gist options
  • Save petermeissner/77110829106276c6e0884cd286cfa59e to your computer and use it in GitHub Desktop.
Save petermeissner/77110829106276c6e0884cd286cfa59e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
svg_points_via_vue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing Points</title>
<script src="js_lib/vue.js"></script>
</head>
<body>
<script type="text/x-template" id="svg_points-template">
<div class="container-fluid">
<svg id = "draw" style="border: 1px solid silver;" v-on:click="svg_func">
<g>
<circle v-for="c in circles" r="10px" :cx="c.x" :cy="c.y"></circle>
</g>
</svg>
</div>
</script>
<div class="container" id="app">
<svg_points></svg_points>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
circles: []
},
methods: {
svg_func: function () {
this.circles.push({x: event.clientX, y: event.clientY, id: this.circles.length + 1});
}
},
template: "#svg_points-template"
})
</script>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment