Wenn du in Vue 3 mathematische Formeln mit LaTeX darstellen möchtest, ist MathJax die ideale Lösung. Mit diesem Ansatz kannst du sowohl statische als auch dynamische Inhalte rendern.

1. MathJax einbinden

Zuerst musst du MathJax in dein Projekt einbinden, zum Beispiel über ein CDN in der HTML-Datei:

<script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

2. Vue 3 App mit MathJax

Die folgende Vue 3 Komponente zeigt, wie du MathJax in einer Vue-App verwenden kannst. Dabei wird jede Formel gerendert, sobald die Komponente gemountet oder aktualisiert wird:

<div id="app">
  <p>Hier ist eine Formel: \(E = mc^2\)</p>
</div>

<script type="module">

  import { createApp, ref, onMounted, onUpdated } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

  const app = createApp({
    setup() {

      const renderMath = () => {

        if (window.MathJax) {

          window.MathJax.typesetPromise();

        }

      };

      onMounted(renderMath);
      onUpdated(renderMath);

      return { wsg_1080 }

    }
  });

  app.mount('#app');

</script>

3. Erklärung

• onMounted(renderMath) sorgt dafür, dass MathJax die Formeln beim ersten Rendern verarbeitet.
• onUpdated(renderMath) stellt sicher, dass auch dynamisch geänderte Inhalte korrekt gerendert werden.
• window.MathJax.typesetPromise() rendert alle LaTeX-Formeln auf der Seite.

Mit dieser Methode kannst du LaTeX-Formeln überall in deiner Vue-App verwenden, egal ob statisch oder dynamisch.

Hat man mit Javascript ein Proxy Objekt, kann man mit Array.isArray() prüfen ob der Wert des Proxy Objektes ein Array ist.

Mit folgender JavaScript Funktion kann ein CSV Download aus einem Array initiiert werden.

function downloadCSV(data, filename) {

	const csvContent = "data:text/csv;charset=utf-8," + data.map(row => row.join(",")).join("\n");
	const encodedUri = encodeURI(csvContent);
	const link = document.createElement("a");

	link.setAttribute("href", encodedUri);
	link.setAttribute("download", filename);

	document.body.appendChild(link);

	link.click();

	document.body.removeChild(link);

}

Das ganze wird dann wie folgt aufgerufen:

downloadCSV(csvData, fileName);

Liegt über einem focusierbaren Element z.B. ein Layer dann sind diese Elemente weiterhin mit Tastatur auswählbar. Folgendes Script löst das Problem durch temporäres setzen eines negativen tabindex.

Beispiel: https://daschmi.de/static/ds_focuser/

const ds_focuser_open_layer = (el_layer) => {
  
  document.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)').forEach((el) => {

    el.setAttribute('ds_focuser_tabindex', el.getAttribute('tabindex'));
    el.setAttribute('tabindex', '-1');

  });

  el_layer.querySelectorAll('*[ds_focuser_tabindex]').forEach((el) => {
    
    el.setAttribute('tabindex', el.getAttribute('ds_focuser_tabindex'));
    el.removeAttribute('ds_focuser_tabindex');

  });

};

const ds_focuser_close_layer = () => {

  document.querySelectorAll('*[ds_focuser_tabindex]').forEach((el) => {
    
    el.setAttribute('tabindex', el.getAttribute('ds_focuser_tabindex'));
    el.removeAttribute('ds_focuser_tabindex');

  });

};

window.addEventListener("load", () => {

  window.addEventListener("resize", () => {

    for (const row of document.querySelectorAll('.equal_child_hight')) {

      let arHeight = {};

      for (const col of row.children) {

        for (const el_index in col.children) {

          if (typeof col.children[el_index] === 'object') {

            if (arHeight[el_index] === undefined || arHeight[el_index] < col.children[el_index].getBoundingClientRect().height) arHeight[el_index] = col.children[el_index].getBoundingClientRect().height;

          }

        }

      }

      for (const col of row.children) {
         
        for (const el_index in col.children) {

          if (arHeight[el_index]) col.children[el_index].style.height = arHeight[el_index] + 'px';

        }

      }

    }

  });

});

import { defineEmits, watch, inject, defineProps, computed, ref } from "vue";

Eigene Events mit defineEmits definieren

const emit = defineEmits(['select']);

...

emit('select');

Watcher definieren

watch(var, (newValue) => { .. });

Funktion aus Elternklasse nutzen

const xhr = inject(xhr);

Properties definieren

const props = defineProps(['label', 'invoicein']);

Computed Properties

const var = computed(() => { return ... };

HTML Referenzen nutzen

<script setup>

  let form = ref(null);

</script>

<template>
  <form ref="form">
  ...
</template>

Router mit Properties

#router.js
..
{ path: 'user/:id', component: CustomerUserEdit, props:true }
..

#.vue
const props = defineProps(['id']);

Methoden einer Komponente über ref nach außen verfügbar machen

defineExpose({
  toggleDisplay
});

Mit folgender Funktion kann man einen Container so scrollen, das dass ausgewählte Element innerhalb des Containers sichtbar wird. Ich habe das ganze für Autocomplete Elemente genutzt.

let el_container = document.getElementById('container'); 
let e_element = document.getElementById('selected');

el_container.scrollTo({
    top: e_element.getBoundingClientRect().top - el_container.getBoundingClientRect().top + el_container.scrollTop
});

JSFiddle

Im folgenden Codeblock ist dargestellt, wie man mit Javascript ein Event (click, change, input etc.) programmatisch auslösen kann.

let el = document.getElementById('select');

el.addEventListener('select', (event) => {
  ..
});

el.dispatchEvent(new Event('change'));

Ein Callback der an eine forEach Funktion übergeben wurde kann die Schleife nicht mit return oder break beenden. Es geht aber über das Nutzen einer Exception.

try {
    			
    BigIPBlock.forEach(function(ip, long, index) {
    
        console.log(index, ip);
        
        if (index > 255) throw new Error();
    
    });

} catch (E) {
    
    console.log('To much IPs in block.');
    
}

Mit folgenden Vanilla JS Code Schnipsel scrollen die Anker Links smart zu den Zielen.

for (let element of document.querySelectorAll('a[href^="#"]')) {
        
    element.addEventListener('click', (event) => {
        
        event.preventDefault();
        
        let hash = element.getAttribute('href');
        let target = document.getElementById(hash.substr(1));
        
        if (target !== null) {
        
            let rect = target.getBoundingClientRect();
            let top = (window.pageYOffset || document.documentElement.scrollTop) + rect.top;
                
            let offset = 92;
            
            window.scrollTo({
                top: top - offset,
                behavior: "smooth"
            });

        }
        
    });
    
}