Vue.js 狀況：onMount 更新變數後，畫面沒有進行變動

狀況

以下是我的 Vue code

<script setup>
let menuTabs = ref([
	{name: "會員", checked: false},
	{name: "客戶", checked: false},
	{name: "站點", checked: false},
])



let selectedMember = ref({name: null, id: null})
let selectedCustomer = ref({name: null, id: null})
let selectedStation = ref({name: null, id: null})

/** 根據當前選擇的 tab 來決定顯示的內容 */
let selectedData = computed(function(){
	if(menuTabs.value[0].checked){
		return selectedMember.value
	}
	if(menuTabs.value[1].checked){
		return selectedCustomer.value
	}
	if(menuTabs.value[2].checked){
		return selectedStation.value
	}
	return {name: null, id: null}
})

/** 切換 menu tab */
function changeMenuTab(index){
	for(let i = 0; i < menuTabs.value.length; i++){
		menuTabs.value[i].checked = i == index
	}
}

</script>
<template>
	<div class="tabs">
  		<div role="tablist" aria-label="Sample Tabs">
			<button v-for = "(tab, index) in menuTabs"
				role="tab"
				:aria-selected="tab.checked"
				:aria-controls="`panel-${index}`"
				:id="`tab-${index}`"
				:tabindex="tab.checked ? 0 : -1" 
				@click="changeMenuTab(index)"
				v-text="tab.name"/>
		</div>
	</div>


	<div class="tab-content">
		<div>
			{{selectedData.name}}
			<template v-if="!!selectedData.id">
				（{{selectedData.id}}）
			</template>
		</div>


		<div v-for = "(tab, index) in menuTabs"
			role="tabpanel"
			:aria-labelledby="`tab-${index}`"
			:id="`panel-${index}`"
			:aria-hidden="!tab.checked"
			:tabindex="0"
			:hidden="!tab.checked">
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus, congue vel laoreet ac, dictum vitae odio.
		</div>
	</div>
</template>

Vue.js 的 ref 出現 null 錯誤

最近在寫 Vue.js 專案

使用 npm run build （或是 npx vite build）編譯成 production 程式後，執行會出錯

以下是我的程式碼：

<script setup lang="ts">
	let myDialog = ref<HTMLDialogElement>(null)
</script>
<template>
	<button @click="myDialog.showModal()">my btn</button>
	<dialog ref="myDialog"></dialog>
</template>

點下按鈕後，會出現以下兩種錯誤：

TypeError: Cannot read properties of undefined (reading 'refs')

TypeError: Cannot read properties of null (reading 'showModal')

用 Spring-boot 處理內容安全策略（Content-Security-Policy）的報告時遇到的坑

這邊記錄一下我在 spring-boot 中，處理 CSP 的 CSP report 遇到的坑

以數字開頭的 class element

如果 HTML code 如下

<span>Hello</span>&nbsp;
<span class="123">John Smith</span>

而 CSS 寫成如下，是無法作用的

.123{
	font-weight: bold;
	color: CornflowerBlue;
}

紀錄：瀏覽器在HTML的容錯處理

W3C 有規範瀏覽器遇到 HTML tag 問題時，是如何處理的。

詳細文件：HTML#Parse errors

An invalid form control is not focusable

完整訊息是像這樣：

An invalid form control with name='' is not focusable

或是

An invalid form control with name='user-name' is not focusable

這是填完表單後，按下送出卻一直沒法送出，畫面也沒有跳出任何 invalid input 警示，打開瀏覽器的「開發人員工具」時，看到的錯誤訊息。

利用 autocomplete attribute 來使用自動儲存的資料

如果有看 Chrome Console 的話，就會注意到當你有表單時，有時會出現如下的警告訊息

[DOM] Input elements should have autocomplete attributes (suggested: "current-password"): (More info: https://goo.gl/9p2vKq)

This page includes a password or credit card input in a non-secure context. A warning has been added to the URL bar. For more information, see https://goo.gl/zmWq3m.

Article / Section lacks heading

根據 W3C 的規則， HTML5 新增的 <article> 、 <section> 這兩個 tag，裡面必須包含 <h2 ~ 6>

要不是我會去使用 The W3C Markup Validation Service 幾乎不會知道地說

是說， w3school 完全沒有告知這個呢

參考資料：HTML/Usage/Headings/Missing - W3C Wiki

CSS：梯形的數值意義

為了某個東西，要用到梯形。沒想到居然麻煩……

jQuery 進行AJAX時，單獨顯示某dom node內容的方法

因為翻w3school時，不小心翻到jQuery的get() method，才半解決自己之前的疑問－－「當我用ajax時，要如何單獨顯示某dom node的內容」…… 結果有bug…… 後來自己研究許久終於連這bug也解決，也就是說「當我用ajax時，要如何單獨顯示某dom node的內容」這問題得到解答了