I'm trying to create a vue webapp whereby a shape (eg a square) is attached to the web page on the spot where a user clicks. But I can't seem to get vue to create the shape and attach it. This is my code, but it doesn't seem to do anything.
<template>
<div class="shapepage" @click="attachShape"></div>
</template>
<script>
export default {
name: "ShapePage",
methods: {
attachShape: (e) => {
render: (createElement) => {
return createElement('div', {
style: {
width: "100px",
height: "100px",
background: "red",
color: "white",
position: "absolute",
left: "50",
top: "50"
}
});
}
}
}
}
</script>
<style>
body {
background-color: rgba(245, 245, 245, 1);
}
.shapepage {
margin-top: 20px;
max-width: 500px;
height: 500px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
box-shadow: 0px 0px 5px 1px grey;
}
</style>
In my opinion , render just like a function that seems like data() ,so I think you can not use in that way,
If my opinion is right , the render function may same like the render in React.js , it will return a VNode Tree, and in default vue(use template expect render), it will make by template and run when the VNode should be refresh
I hope I can help you
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.