petermeissner/svg_points_via_vue.html

## 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>
	<!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>