JSFiddle - React, Tailwind, and code Playground

by terryaney

HTML

<script type="module">
  // https://github.com/vuejs/petite-vue/discussions/169
	import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'

	const state = reactive({
		setMode: function (benefit) {
			var beneficiaries = benefit == undefined ? [] : [ "Spouse", "Son" ];
			this.model.beneficiaries = beneficiaries;
			this.model.currentBenefit = benefit;
			this.model.showConfirm = false;
		},
		startEdit: function (benefit) {
			console.log("Edit Clicked");
			this.setMode(benefit);
		},
		cancelEdit: function () {
			console.log("Cancel Clicked");
			this.setMode();
		},
		saveBenefit: function () {
			console.log("Save Clicked");
			this.model.showConfirm = true;
		},
		acceptBenefit: function () {
			console.log("Accept Clicked");
			this.model.acceptClicks++;
			this.setMode();
		},
		model: {
			acceptClicks: 0,
			currentBenefit: undefined,
			showConfirm: false,
			beneficiaries: []
		}
	});

	createApp(state).mount('#app')
</script>

<div id="app" v-scope>
	<p>Scenarios (open console.log to see events)</p>
	<ul>
		<li>
			Scenario 1
			<ul>
				<li>Click Edit, then Cancel: Why two unmounts for the v-for="item in model.beneficiaries"?</li>
			</ul>
		</li>
		<li>
			Scenario 2
			<ul>
				<li>Click Edit, then Save: All OK</li>
				<li>Click Accept: Why isConnected = false mount on 'Edit Screen'?</li>
			</ul>
		</li>
		<li>
			Scenario 3
			<ul>
				<li>Repeat cycles of Edit, Cancel or Edit Save, then Accept and read notes about acceptClicks</li>
			</ul>
		</li>
	</ul>

	<div>State:</div>
	<div>currentBenefit: {{model.currentBenefit == undefined ? 'undefined' : 'set'}}</div>
	<div>showConfirm: {{model.showConfirm}}</div>
	<div>beneficiaries: {{model.beneficiaries.length}}</div>
	<div>acceptClicks: {{model.acceptClicks}}</div>
	<div v-if="model.acceptClicks > 0">
		<div>After each Accept</div>
		<ul>
			<li>When clicking Edit, {{model.acceptClicks}} isConnected=false mounts for 'Has Beneficiaries', 'Spouse' and 'Son'</li>
			<li>When...