jagroop/vuejs.html

## vuejs.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
     <div id="app">
        <ul v-for="(post, index) in posts">
        <li>
            <div>
            <p contenteditable="true" v-text="post.title" @input="updateContent(post.id, $event)">
            </p>
            </div>
        </li>
        </ul>
     </div>
    <script>
    var app = new Vue({
        el: '#app',
        data() {
            return {
                posts: [
                    {id: 1, title: 'flow', status: true},
                    {id: 2, title: 'brother', status: true},
                    {id: 3, title: 'shelter', status: true},
                    {id: 4, title: 'slow', status: true},
                    {id: 5, title: 'kids', status: true},
                    {id: 6, title: 'announced', status: true},
                    {id: 7, title: 'night', status: true},
                    {id: 8, title: 'carry', status: true},
                    {id: 9, title: 'shown', status: true}
                ]
            }
        },
        methods: {
            updateContent(post_id, e) {
                var content = e.target.innerHTML.replace(/^\|+|\|+$/g, '');
                console.log(content, post_id);
            }
        }
    });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
	</head>
	<body>
	<div id="app">
	<ul v-for="(post, index) in posts">
	<li>
	<div>
	<p contenteditable="true" v-text="post.title" @input="updateContent(post.id, $event)">
	</p>
	</div>
	</li>
	</ul>
	</div>
	<script>
	var app = new Vue({
	el: '#app',
	data() {
	return {
	posts: [
	{id: 1, title: 'flow', status: true},
	{id: 2, title: 'brother', status: true},
	{id: 3, title: 'shelter', status: true},
	{id: 4, title: 'slow', status: true},
	{id: 5, title: 'kids', status: true},
	{id: 6, title: 'announced', status: true},
	{id: 7, title: 'night', status: true},
	{id: 8, title: 'carry', status: true},
	{id: 9, title: 'shown', status: true}
	]
	}
	},
	methods: {
	updateContent(post_id, e) {
	var content = e.target.innerHTML.replace(/^\\|+\|\\|+$/g, '');
	console.log(content, post_id);
	}
	}
	});
	</script>
	</body>
	</html>