Patch changelog html in Vue.

client/components/Windows/Changelog.vue

@@ -20,6 +20,7 @@
 				<template v-if="$store.state.versionData.current.changelog">
 					<h3>Introduction</h3>
 					<div
+						ref="changelog"
 						class="changelog-text"
 						v-html="$store.state.versionData.current.changelog"
 					></div>
@@ -56,6 +57,26 @@ export default {
 		if (!this.$store.state.versionData) {
 			socket.emit("changelog");
 		}
+
+		this.patchChangelog();
+	},
+	updated() {
+		this.patchChangelog();
+	},
+	methods: {
+		patchChangelog() {
+			const links = this.$refs.changelog.querySelectorAll("a");
+
+			for (const link of links) {
+				// Make sure all links will open a new tab instead of exiting the application
+				link.setAttribute("target", "_blank");
+
+				if (link.querySelector("img")) {
+					// Add required metadata to image links, to support built-in image viewer
+					link.classList.add("toggle-thumbnail");
+				}
+			}
+		},
 	},
 };
 </script>

client/js/socket-events/changelog.js

@@ -7,18 +7,6 @@ socket.on("changelog", function(data) {
 	vueApp.$store.commit("versionData", data);
 	vueApp.$store.commit("versionDataExpired", false);
 
-	/* TODO: implement changelog rendering in Vue
-	// 1. Release notes window for the current version
-	$("#changelog").html(templates.windows.changelog(data.current));
-
-	const links = $("#changelog .changelog-text a");
-	// Make sure all links will open a new tab instead of exiting the application
-	links.prop("target", "_blank");
-	// Add required metadata to image links, to support built-in image viewer
-	links.has("img").addClass("toggle-thumbnail");
-	*/
-
-	// 2. Version checker visible in Help window
 	let status;
 
 	if (data.latest) {