JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
   [[modify_index]]
      <ul>
        <li v-for="task in tasks">[[task]]</li>
      </ul>
</div>

JavaScript

const { createApp, reactive, ref } = Vue

const app = createApp({
	delimiters: ['[[', ']]'],
  mounted () {
    console.log('mounted')
  },
	setup() {
		const data = {
  		returned_task: ref(''),
	  	temp_task: ref(''),
 	 		modify_index: ref(-1),
  		tasks: reactive([]),
		}

		const methods = {
		  select: (index) => {
    		if (data.modify_index.value === index){
		      data.modify_index.value = -1;
    		} else {
		      data.modify_index.value = index
		      data.temp_task.value = data.tasks[data.modify_index.value]
		    }
  		},
  		deleteSelected: () => {
		    data.tasks.splice(data.modify_index.value, 1);
		    data.modify_index.value = -1;
		  },
		  updateSelected: () => {
		    data.tasks.splice(data.modify_index.value, 1, data.temp_task.value);
		    data.modify_index.value = -1;
  		}
		}

		// created lifecycle event is not needed  but let's mock a delay
		setTimeout(() => {
  		data.tasks.splice(0, 0, ...['do this 🐱‍🐉', 'and that 🤳']);
		}, 120);

		return {
  		...data,
  		...methods
		}
	}
})

app.mount('#app')