Vue Js Make Text Editable on Click: In Vue.js, you can make text editable on click by using the v-on directive to bind a click event to a method that toggles the editable state of the text. When the text is clicked, the method is called and the editable state is changed, which causes the text to be rendered with an input element instead of a plain text element. The v-model directive can then be used to bind the input element’s value to a data property in the component, allowing the user to edit the text. When the input element loses focus or the user presses Enter, the editable state is toggled back and the updated text is saved. This can be achieved with only a few lines of code and is a common pattern used in web applications.

How can I make text editable on click using Vue.js?

1. The HTML code defines a div element with an id of “app”. Within this div, there are three elements:
   • An h1 element with a ref of “heading” and a contenteditable attribute that allows the user to edit the text. The text within the element is set to the value of content.heading, which is a string defined in the Vue app’s data object.
   • An h2 element with a ref of “subheading” and a contenteditable attribute that allows the user to edit the text. The text within the element is set to the value of content.subheading, which is a string defined in the Vue app’s data object.
   • A p element with a ref of “paragraph” and a contenteditable attribute that allows the user to edit the text. The text within the element is set to the value of content.paragraph, which is a string defined in the Vue app’s data object.
2. The Vue app’s data object contains a single property called content, which is an object with three properties (heading, subheading, and paragraph), each of which is a string. These strings represent the initial text that will be displayed in the h1, h2, and p elements, respectively.
3. The Vue app’s methods object contains three methods:
   • updateHeading: This method is called whenever the user inputs new text into the h1 element. It updates the content.heading property with the new text.
   • updateSubheading: This method is called whenever the user inputs new text into the h2 element. It updates the content.subheading property with the new text.
   • updateParagraph: This method is called whenever the user inputs new text into the p element. It updates the content.paragraph property with the new text.

Vue Js Make Text Editable on Click Example

<div id="app">
	<h1 ref="heading" contenteditable v-html="content.heading" @input="updateHeading"></h1>
	<h2 ref="subheading" contenteditable v-html="content.subheading" @input="updateSubheading"></h2>
	<p ref="paragraph" contenteditable v-html="content.paragraph" @input="updateParagraph"></p>
</div>
<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					content: {
						heading: 'Editable Heading',
						subheading: 'Editable Subheading',
						paragraph: 'Editable paragraph text.',
					},
				}
			},
			methods: {
				updateHeading(event) {
					this.content.heading = event.target.innerHTML;
				},
				updateSubheading(event) {
					this.content.subheading = event.target.innerHTML;
				},
				updateParagraph(event) {
					this.content.paragraph = event.target.innerHTML;
				},
			},
		});
		app.mount('#app');
</script>

Output of above example