Příspěvky

1126

Software / Re:ssh-agent pasphrase forwarding

« kdy: 17. 06. 2021, 17:54:08 »

To je pro borce, kteří denně otevřou desítky SSHček. :-)

Není potřeba desítky, stačí dvě :-) Pak také záleží na konfiguraci klientů, jestli se ssh nebo sftp na stejný server se stejným uživatelem připojí k existujícímu spojení, nebo si vytvoří spojení nové (což je u většiny klientů výchozí nastavení).

Ale připouštěl jsem si, že v paměti musí fungovat něco jako izolace alokovaných adres paměti konkrétním procesům.

To funguje. Nicméně ssh-agent poskytne službu autentizace (ne privátní klíč) každému procesu, který si o ni řekne (nemá jak poznat hodné procesy od těch zlých).

A co prosím ten forwarding ssh-agenta? Není to náhodou lepší než čpová karta/hw klíč?

Forwarding je vhodný tomu, že když se z jednoho stroje hlásíte dál, můžete použít toho agenta, kterého máte u sebe. Tj. nemusíte heslo zadávat na tom prvním vzdáleném počítači, nemusíte tam kopírovat svůj privátní klíč. Pokud by na tom „mezistroji“ byla nějaká škodlivá aplikace, může zneužít ssh-agenta v tu chvíli, kdy jste připojen, ale nezíská váš přístup trvale.

Těžko to porovnávat s čipovou kartou nebo HW klíčem, každé slouží k něčemu jinému. Hardwarová úložiště slouží k tomu, že je prvátní klíč uložen na nich a nikde je neopustí. Takže i kdyby měl útočník kompletní kontrolu nad vaším počítačem, privátní klíč nezíská. ssh-agenta můžete použít s USB tokenem nebo čipovou kartou.

1127

Software / Re:ssh-agent pasphrase forwarding

« kdy: 17. 06. 2021, 16:53:13 »

ssh-agent se nepoužívá primárně kvůli bezpečnosti, ale hlavně kvůli pohodlí. Bezpečnost je až druhotná – když budete heslo psát třicetkrát denně, asi nebude moc komplikované. Zároveň když ho budete zadávat často, je větší riziko, že ho někdo všímavý odpozoruje, nebo že to heslo zadáte někam jinam. Další věc je, že různé bezpečnostní chyby umožňují častěji získat soubor z disku (soubor s privátním klíčem), než komunikovat s jiným procesem (autorizovat komunikace ssh-agentem). Každopádně bych ale ssh-agenta nepovažoval za něco, co má primárně zvýšit bezpečnost (pokud ho nebudete kombinovat s klíčem uloženým na USB tokenu nebo čipové kartě).

1128

Software / Re:Kdy použít pro privátní klíč passphrase

« kdy: 17. 06. 2021, 16:47:56 »

Pokud vám útočník může nainstalovat něco do systému, nepomůže žádné softwarové řešení. Pak pomůže jenom klíč na USB tokenu nebo čipové kartě.

Heslo ke klíči řeší případ, kdy by vám ten notebook někdo ukradl. Keylogger mu nepomůže, heslo na ukradeném notebooku už zadávat nebudete. Ale pokud někdo na tom ukradeném notebooku najde klíč bez hesla, může se okamžitě přihlásit a začít páchat škodu. Pokud ten klíč bude chráněný heslem, může útočník to heslo začít louskat. Asi tam nebude nějaké extra komplikované heslo, takže se počítá s tím, že se k tomu klíči v řádu hodin nebo dnů dostane. Jenže tu dobu vy máte na to, abyste ten klíč všude zneplatnil. Takže to je (pokud vím) jediný důvod, proč se používá heslo ke klíči – aby vám to dalo čas na zneplatnění klíče.

1129

Sítě / Re:ipv6 a klientske site

« kdy: 17. 06. 2021, 12:32:31 »

3] proc si klient nastavi ipv6 adresu, i kdyz mu ji dhcpv6 nepriradi? jak to zablokovat, resp. jde zablokovat, aby klient nemohl automaticky komunikovat ani pres link-local adresy bez nasazeni ruznych security reseni na blokovani portu?

Myslíte IP adresu z rozsahu přidělovaného přes DHCPv6, nebo jinou? To, že má zařízení více IPv6 adres, je naprosto běžná věc – nestandardní je spíš situace opačná, kdy má jen jednu (ale i taková konfigurace může existovat).

Blokování komunikace na link-local adresách musíte řešit firewallem. Není možné zakázat veškerou komunikaci na link-local IP adresách, protože na tom závisí komunikace v lokální síti, např. to DHCPv6.

1130

Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?

« kdy: 14. 06. 2021, 21:03:05 »

Jinak ano, pokud se změní stav nějaké komponenty, React by default vyrenderuje celý podstrom komponent, i když se jejich props nezměnily. To je feature a dá se tomu samozřejmě zabránit.

Pravda, úplně se zapomnělo na Vue. Když se ve Vue použije šablona, může Vue sledovat, která část šablony je závislá na které části modelu. Takže když se změní model, překreslí Vue jenom odpovídající část šablony. Samozřejmě to funguje jenom když se s modelem pracuje pomocí prostředků, které Vue dokáže sledovat. Pokud tomu někdo nerozumí, snadno tuhle „magii“ rozbije, jako se to povedlo registrovanemu123, a donutí Vue překreslovat vše (nebo v horším případě bude Vue aktualizace modelu ignorovat).

App.vue

Kód: [Vybrat]

<template>
  <table class="table-sm">
    <thead>
      <tr>
        <th class="table-date">Datum</th>
        <th class="table-food">Potravina</th>
        <th class="table-amount">Mnozstvi</th>
        <th class="table-calories">Energie</th>
      </tr>
    </thead>
    <tbody>
      <Row v-for="(foodEntry, index) in foodEntries" :key="{ index }" :foodEntry="foodEntry" />
    </tbody>
  </table>
</template>

<script>
import Row from "./Row.vue";

export default {
  components: {
    Row,
  },
  data() {
    const foodEntries = [];
    for (let i = 0; i < 5000; i++) {
      foodEntries.push({ date: "2021-06-12", name: "brokolice", amount: 1, totalCalories: 1 });
    }
    return {
      foodEntries,
    };
  },
  created() {
    this.intervalHandle = setInterval(() => this.foodEntries[0].amount++, 1000);
  },
  beforeDestroy() {
    clearInterval(this.intervalHandle);
  },
};
</script>

Row.vue

Kód: [Vybrat]

<template>
  <tr>
    <td>{{ foodEntry.date }}</td>
    <td>{{ foodEntry.name }}</td>
    <td>{{ foodEntry.amount }}</td>
    <td>{{ calories }}</td>
  </tr>
</template>

<script>
let rendered = 0;

export default {
  props: ["foodEntry"],
  computed: {
    calories() {
      console.log(`Vypočítávám kalorie po ${rendered++}.`);
      return this.foodEntry.totalCalories * this.foodEntry.amount;
    },
  },
};
</script>

Tohle vypíše 5000× „vypočítávám kalorie“, a pak to každou sekundu přidá jeden další řádek. Kdyby nebyla property calories závislá na foodEntry.amount, nebude se při změně ta počítaná property volat vůbec.

Stejně jako lhát, že jsi něco vyzkoušel, když jsi to nevyzkoušel.

Já bych mu i věřil, že to zkoušel. Ale když vůbec neví, co dělá, neví ani, co zkoušel a co zjistil…

1131

Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?

« kdy: 13. 06. 2021, 22:40:51 »

SLAVA, ZAHADA ROZRESENA!!!

Nerozřešena. Pořád tomu nerozumíte.

CELOU DOBU jsem to tu resil, s *** Jirsakem jsem tu marnil cas, a konecne mam odpoved, kterou zjevne adny mistni javascriptar nevi, ackoliv by teda mel.

https://stackoverflow.com/questions/40819992/react-parent-component-re-renders-all-children-even-those-that-havent-changed

React: Parent component re-renders all children, even those that haven't changed on state change

Napsal jsem vám to minimálně třikrát:

React nic nevolá, tu komponentů voláte vy. Že nedošlo ke změně propad neznamená, že se komponenta nema znovu vyrenderovat. V hlavní komponentě voláte setInterval, takže chcete něco měnit každou sekundu - přitom se props nemeni. Už jsem vám psal několikrát, že React nemá žádnou skrytou magii. Prostě když zavoláte komponentů, vyrenderuje ji, výsledek porovná s aktuálním DOMem a ten upraví tak, aby odpovídal výsledků komponenty. Pokud tedy někdo volá renderování komponenty, jste to jen vy, nikdo jiný.

Ovšem nechápu, co vás tak překvapuje na tom, že když zavoláte metodu, provede se kód té metody.

React se o žádné stavy nestará. Komponenta v Reactu je funkce, která vrací virtuální DOM. Ten následně Reat porovná se skutečným domem a aplikuje na něj změny. React vám akorát poskytuje hooky, kterými můžete signalizovat, že teď je potřeba tu funkci zavolat znovu. Je jenom na vás, kdy budete tu funkci volat. Ale když ji zavoláte, musí se provést, celá – React samozřejmě nemá žádné prostředky, jak by mohl zařídit, aby se provedlo půl kódu funkce a půlka se vynechala.

A v historii je toho určitě ještě víc.

Takze Filipe Jirsaku, oprav si svoji znalosti.

Zatím jste nenapsal nic, co by bylo v rozporu s mými znalostmi.

Omlouvat se mi, pokud neches, nemusis, uz jsem ti vynadal dost.

Omlouvám se, že jsem vás dávno nepřidal na seznam trollů. Jdu to napravit.

1132

Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?

« kdy: 13. 06. 2021, 00:24:42 »

Když máte pořád takový problém s Reactem, protože tam hledáte nějakou magii (která tam není), třeba vám pomůže, když uvidíte to samé v JavaScriptu.

Tady je původní kód v Reactu:

Kód: [Vybrat]

import React, { useState, useEffect } from "react";
import { render } from "react-dom";

const Row = ({ foodEntry }) => {
  console.log('Velké překvapení, vykresluji řádek tabulky.')

  return (
  <tr>
    <td>{foodEntry.date}</td>
    <td>{foodEntry.name}</td>
    <td>{foodEntry.amount}</td>
    <td>{foodEntry.totalCalories}</td>
  </tr>
  );
}

const App = () => {
  const [foodEntries, setFoodEntries] = useState(() => {
    const foodEntries = [];
    for (let i = 0; i < 5000; i++) {
      foodEntries.push({ date: "2021-06-12", name: "brokolice", amount: 1, caltotalCaloriesories: 0 });
    }
    return foodEntries;
  });

  useEffect(() => {
    const intervalHandle = setInterval(() => {
      setFoodEntries((oldState) => {
        const newState = [...oldState];
        newState[0].amount++;
        return newState;
      });
    }, 1000);
    return () => clearInterval(intervalHandle);
  }, []);

  return (
    <table class="table-sm">
      <thead>
        <tr>
          <th class="table-date">Datum</th>
          <th class="table-food">Potravina</th>
          <th class="table-amount">Mnozstvi</th>
          <th class="table-calories">Energie</th>
        </tr>
      </thead>
      <tbody>
        {foodEntries.map((foodEntry, index) => (
          <Row foodEntry={foodEntry} key={index} />
        ))}
      </tbody>
    </table>
  );
};

render(<App />, document.getElementById("app"));

A tady je to samé v JavaScriptu:

Kód: [Vybrat]

const Row = ({ foodEntry }) => {
  console.log('Velké překvapení, vykresluji řádek tabulky.')

  const trElm = document.createElement("tr");

  const dateElm = document.createElement("td");
  dateElm.innerText = foodEntry.date;
  trElm.appendChild(dateElm);

  const nameElm = document.createElement("td");
  nameElm.innerText = foodEntry.name;
  trElm.appendChild(nameElm);

  const amountElm = document.createElement("td");
  amountElm.innerText = foodEntry.amount;
  trElm.appendChild(amountElm);

  const totalCaloriesElm = document.createElement("td");
  totalCaloriesElm.innerText = foodEntry.totalCalories;
  trElm.appendChild(totalCaloriesElm);

  return trElm;
};

const foodEntries = [];
for (let i = 0; i < 5000; i++) {
  foodEntries.push({ date: "2021-06-12", name: "brokolice", amount: 1, totalCalories: 0 });
}
const appElm = document.getElementById("app");

const App = () => {
  const tableElm = document.createElement("table");
  tableElm.className = "table-sm";

  const theadElm = document.createElement("thead");
  tableElm.appendChild(theadElm);

  const trElm = document.createElement("tr");
  theadElm.appendChild(trElm);

  const dateElm = document.createElement("td");
  trElm.appendChild(dateElm);
  dateElm.className = "table-date";
  dateElm.innerText = "Datum";

  const foodElm = document.createElement("td");
  trElm.appendChild(foodElm);
  foodElm.className = "table-food";
  foodElm.innerText = "Potravina";

  const amountElm = document.createElement("td");
  trElm.appendChild(amountElm);
  amountElm.className = "table-amount";
  amountElm.innerText = "Mnozstvi";

  const caloriesElm = document.createElement("td");
  trElm.appendChild(caloriesElm);
  caloriesElm.className = "table-calories";
  caloriesElm.innerText = "Energie";

  const tbodyElm = document.createElement("tbody");
  tableElm.appendChild(tbodyElm);

  foodEntries.forEach((foodEntry) => tbodyElm.appendChild(Row({ foodEntry })));

  return tableElm;
};

setInterval(() => {
  foodEntries[0].amount++;
  appElm.firstChild.remove();
  appElm.appendChild(App());
}, 1000);

appElm.appendChild(App());

Ten kód dělá principiálně to samé, jako výše uvedený kód v Reactu, React jenom navíc:

• může více událostí, které vyvolávají překreslení komponenty, sloučit do jednoho překreslení, (což ale tady nemůže nastat, protože tu je jen jedna událost),
• nerenderuje komponenty rovnou do skutečného DOMu, ale vyrenderuje je do virtuálního DOMu, který porovná s předchozí verzí a pak na reálný DOM aplikuje pouze zjištěné rozdíly.

Snad už je vám teď jasné, proč se při změně jediné položky pole vyvolá renderovací funkce pro všechny řádky, a také jakým způsobem tomu zamezit, pokud by to tedy bylo potřeba optimalizovat

1133

Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?

« kdy: 12. 06. 2021, 16:29:09 »

React nic nevolá, tu komponentů voláte vy. Že nedošlo ke změně propad neznamená, že se komponenta nema znovu vyrenderovat. V hlavní komponentě voláte setInterval, takže chcete něco měnit každou sekundu - přitom se props nemeni. Už jsem vám psal několikrát, že React nemá žádnou skrytou magii. Prostě když zavoláte komponentů, vyrenderuje ji, výsledek porovná s aktuálním DOMem a ten upraví tak, aby odpovídal výsledků komponenty. Pokud tedy někdo volá renderování komponenty, jste to jen vy, nikdo jiný.

1134

Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?

« kdy: 12. 06. 2021, 15:48:43 »

ze this.state.arr.map() je volani metody, ktere ty zakazujes?

Nezakazuju.

A chapes, Jirsaku, ze ten tag <A>[/url] je sam o sobe vlastne taky volani metody?

Já to chápu. Ovšem nechápu, co vás tak překvapuje na tom, že když zavoláte metodu, provede se kód té metody.

Jirsaku a chapes, ze to volani metody <A>[/url] se provede zbytecne 4999 krat, kdyz zmenis stav, ikdyz vnitrni stav A s tim nema nic spolecneho?

Samozřejmě, že to chápu. Proč teda tu metodu 4999× voláte, když je to volání zbytečné?

Vy tu stále dokola naříkáte, že jste 5000× zavolal funkci a ona se 5000× provedla. A pořád si stěžujete, že se 5000× volat neměla. Tak proč ji pořád 500× voláte?

1135

Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?

« kdy: 12. 06. 2021, 15:44:14 »

A ja nevim, proc jste vy prekvapen, ze nekdo je prekvapen zavolanim funkce v komponente, ktere se vubec nezmenil stav.

React se o žádné stavy nestará. Komponenta v Reactu je funkce, která vrací virtuální DOM. Ten následně Reat porovná se skutečným domem a aplikuje na něj změny. React vám akorát poskytuje hooky, kterými můžete signalizovat, že teď je potřeba tu funkci zavolat znovu. Je jenom na vás, kdy budete tu funkci volat. Ale když ji zavoláte, musí se provést, celá – React samozřejmě nemá žádné prostředky, jak by mohl zařídit, aby se provedlo půl kódu funkce a půlka se vynechala.

Vite moc dobre o co se tady snazim

Ne, nevím. Zatím mi to připadá, že akorát trollíte.

nedokazate to vysvetlit, ocividne tomu sam poradne nerozumite.

Nedokážu vysvětlit co?

{{ foodEntry.getTotalCalories() }}

Tady voláte nějakou metodu na objektu. Tedy možná, netuším, co znamenají ty dvojité závorky. Není to ani Vue, protože tam byste nevolal žádnou metodu, jen byste četl stav. Není to ani React, protože ani tam byste nevolal metodu.

{{ foodEntry.amount / 100 * foondEntry.calories }}

Tady může být foodEntry stav jak ve Vue tak v Reactu.

Od toho ty slozene zavorky hergot jsou!

Složené závorky jsou ve Vue proto, abyste mohl do šablony vložit data. V Reactu proto, abyste mohl do šablony vložit kód.

Vue to ma i v dokumentaci, ze se v tom delaji takovehle veci, od toho to sakra je.

Ne, Vue má v dokumentaci, že se takovýmhle věcem máte vyhnout.

Muj kod je dukazem toho, ze vyse uvedeny vyraz se vykona 4999x.

Asi byste se neměl pouštět do programování, když vás překvapuje, že počítač udělá přesně to, co mu řeknete. Když mu řeknete, že má nějaký výraz vykonat 4999×, tak ho vykoná 4999×. Pokud se tolikrát vykonávat nemá, je to vaše chyba, že takový příkaz dáváte, ne chyba počítače, že váš příkaz přesně vykoná.

1136

Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?

« kdy: 12. 06. 2021, 15:19:45 »

Presto React zavola metody uvnitr komponenty A.

Ne, metody uvnitř komponenty A voláte vy.

Otazka do pranice podporujici konstruktivni debatu: tak co je to sakra za shit?

Vždyť vám to tu několik lidí říká celou dobu, že ten váš kód je shit.

Jedine vysvetleni je, ze to React cele znovu renderuje.

Jistě že to celé znovu renderuje, když ho k tomu nutíte.

Vyse uvedene je dulezity principialni priklad, a zadam mistni javascriptare, aby to vysvetlili.

Výše uvedené je akorát příklad toho, že to máte napsané špatně. Vysvětlení je jednoduché. Když v JavaScriptu zavoláte funkci, provede se kód, který je v těle té funkce. Když v Reactu změníte stav komponenty, vyrenderuje se znova ta komponenta.

1137

Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?

« kdy: 12. 06. 2021, 15:09:17 »

Váš kód je důkazem toho, že když to napíšete blbě, blbě to funguje. Nevím, co vás stále překvapuje na tom, že když zavoláte funkci, provede se kód v těle té funkce. To je normální, takhle se chovají všechny programovací jazyky.

Evidentně se nic naučit nechcete a jenom tu trollíte. Že je váš kód špatně jste se dozvěděl už asi desetkrát, a stejně na něm pořád trváte. Kdybyste se to chtěl naučit, ten špatný kód dávno zahodíte.

1138

Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?

« kdy: 12. 06. 2021, 14:48:15 »

A co volani getteru v radich tabulky? To je taky funkce. Pokud ani to nemuzu delat, tak v tom pripade nemuzu vubec pouzivat OOP.

Ano, v šablonách Reactu ani Vue nepoužíváte OOP. V šablonách používáte stav. Vue má computed properties, to je náhrada getterů pro šablony Vue. Stejně tak i v Reactu můžete volat jenom funcke závislé na stavu komponenty.

1139

Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?

« kdy: 12. 06. 2021, 14:31:32 »

Dotaz neni stale zodpovezen.

Odpověď na váš dotaz je, že máte chybně váš kód. V šabloně nemáte volat žádné funkce, jenom číst stav.

Ma se za to, ze jak React tak Vue udelaji vnitrne diff pri zmene stavu, a nasledne budou sahat jen do tech tagu, kterych se zmena stavu tyka.

Ne „m se za to“, ono to tak je.

Muj kod dokazuje ze to tak uplne neni pravda jak pro React, tak pro Vue, a nikdo to tady neumi uplne vysvetlit.

Ne, váš kód nic takového nedokazuje. Váš kód je za prvé špatně, za prvé se volá před vytvořením virtuálního DOMu, taže nevypovídá vůbec nic o tom, co se s virtuálním DOMem děje pak.

Co se tyce volani funkci v template, asi tezko bude problem zavolat tam funkci napr. parseFloat(), je snad na to nekde nejake doporuceni, ze ani to se nema?

Samozřejmě, že to bude problém. V šabloně máte jenom číst stav (ve Vue se tomu říká data), nic jiného.

První věta z dokumentace šablon Vue:

Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data.

Vidíte tam něco o renderování výsledku volání funkce? Ne, šablona slouží k renderování dat uložených v komponentě.

Pokud bych mel tabulku o 1000 radku (coz bych klidne mohl), tak se mi bude 1000x volat parse float pri kazde jeden zmene Input Number ciselniku, kuprikladu. Proste upravim stav 1 itemu, a upravi se zbyvajicich 999 itemu.

Ano, když to budete dělat svým špatným způsobem, bude se to volat tisíckrát.

Psal jste, že se to chcete naučit. Nebylo by tedy lepší udělat to správně, než trvat na svém špatném řešení?

Takze principialni problem, predlozeny na zacatku, ze totiz mam tabulku o 5000 radcich, upravim item v 1 radku, a dojte k zavolani metod v cele tabulce, je stale platny

Ano, stále platí, že váš kód je špatně, když při renderování šablony voláte funkce nezávislé na stavu.

Řešení je stále to stejné – nevolat tam tu nesmyslnou metodu, která nic nedělá. Žádné tlačítko uložit přidávat nemusíte.

1140

Vývoj / Re:Jak v Reactu ci Vue modifikovat jen 1 radek vykreslene tabulky?

« kdy: 12. 06. 2021, 13:51:51 »

Compute jsem zkousel, ale to neni reseni. Me se jedna o metody volane uvnitr foreache, computed se nevola jako metoda, ale jako property.

Netuším, čemu říkáte „volat jako property“. Computed property je normální funkce, která závisí na aktuálním stavu a vrací hodnotu. Díky tomu, že závisí na aktuálním stavu, ji Vue zavolá jenom tehdy, když se změní stav, který funkci ovlivňuje.

A jak v tom pomuze React? Zkousel jsem to a chova se to stejne, upravim jen jeden radek z foreache, a metoda called() se zavola pro vsechny radky vzdy. Je to stejne chovani jako v magickem Vue.

Reat tomu pomůže tak, že když chcete změnit stav, musíte explicitně zavolat funkci, která stav změní. Takže ji snad nebudete volat v případě, kdy se stav nezměnil (a když ji i přesto zavoláte, React pozná, že se nic nezměnilo, a nebude renderovací funkci volat zbytečně).

PS: Ja tady na to zakladam tema, a jak vidite, tak se to prave ucim pouzivat, a snazim se tomu rozumet - proto se tu na to ptam, proto tohle tema zakladam, jsem na diskuznm foru. Nevim, proc musite mit ustavicne takove utocne a curacke prupovidky - jste snad debil? Pokladam tady normalni, odrojakovany dotaz na vnitrni chovani tech frameworku.

Ne, nepokládáte normální dotazy. Nepřečetl jste si ani základní návody, vymyslel jste nesmyslný kód a teď na tom nesmyslu trváte. V šabloně nemáte volat žádné funkce, máte tam pracovat jenom se stavem.

Pokud se chcete Vue nebo React naučit používat, přečtěte si dokumentaci na jejich webu. Pak z vašeho kódu odstraňte to nesmyslné volání funkce v šabloně a budete mít po problému.