[untitled] Notepad content writing area

HTML

<div>
	<div>
		// title 
		<div>
			<input
      			type="text"
      			placeholder=" title ..."
      			value="{
    {title}}"  // stay data Definition title Variable 
      			maxlength="20"    // Input at most 20  A word 
      			onchange="getTitle"
    		/>
		</div>
		
		// Content 
		<div>
			<textarea
      			placeholder=" Input content "
      			value="{
    {content}}"  // stay data Definition content Variable 
      			onchange="getContent"
    		></textarea>
		</div>
		
		// label 
		<text> Add a tag ~</text>
		<div>
			<text
        		class="{
    {label == ' Ordinary '?'common':''}}"  // stay data Definition label Variable , And write the default value 
        		onclick="changeLabel(' Ordinary ')"
        	> Ordinary </text>
      		<text
        		class="{
    {label == ' important '?'important':''}}"
        		onclick="changeLabel(' important ')"
        	> important </text>
      		<text
        		class="{
    {label == ' To do '?' to-do':''}}"
        		onclick="changeLabel(' To do ')"
        	> To do </text>
		</div>
	</div>
	// Finish button  opacity: Transparency of color   When the button canAdd When clickable, the transparency is 1  Otherwise 0.3  namely 30%
	<div>
		<text onclick="addMemo" style="opacity: {
    {canAdd ? '1' : '0.3'}};" > complete </text>
	</div>
</div>

JS

// The introduction of the file 
import {
     getMemoList, setMemoList } from '../../helper/data.js'
import router from '@system.router'
.......
data() {
    
    return {
    
      index: '',
      title: '',
      content: '',
      label: ' Ordinary '
    }
  },
.......
//  title  οnchange="getTitle"
  getTitle(e) {
          
    this.title = e.value
  },

//  Content  οnchange="getContent"
  getContent(e) {
    
    this.content = e.value
  },
// label 
    changeLabel(label) {
    
    this.label = label
  },
//  complete  οnclick="addMemo"
  computed: {
    
   canAdd() {
    
      if (this.title && this.content) {
    
        return true   // When content and title are detected  “ complete ” Button to click  true  otherwise false
      } else {
    
        return false
      }
    }
  },
  .........
// Asynchronous operations 
  async addMemo() {
    
    if (this.title && this.content) {
    
    
      const memoAdd= {
    
        title: this.title,
        content: this.content,
        label: this.label,
        timestamp: +new Date(),
        is_top:false,
      }
      
      const memoList = await getMemoList()
      if (this.index !== '') {
    
        memoList[this.index] = memoAdd
      } else {
    
        memoList.push(memoAdd)
      }
      
      setMemoList(memoList)
      router.back()
      
    }
  },