Jak správně sledovat objekt v Vue?

Question 1

Snažím se používat Vue pozorovatel na vypočítaný objekt, a to není vůbec pracovat. To funguje správně, pokud je to jen řetězec, ale ne, pokud je to objekt. Sledoval jsem Vue dokumentace, ale já jsem ještě stále nic přihlášen ke konzole, když objekt změní. Vlastnosti objektu a počítačová majetku se mění, jak jsem již potvrdil v Vue Nástroje. Co dělám špatně? Díky

<v-btn small dark @click="test1.asdf = 'blah'">Test</v-btn>
    data() {
      return {
        test1: {},
      }
    },
    computed: {
      test() {
        return this.test1
      }
    },

    watch: {
      test: {
        handler: function(val, oldVal) {
          console.log(oldVal, val);
        },
        deep: true
      }
    }

Question 2

Zkuste tento kód, jeho funguje dobře

<template>
  <div id="app">
    {{ test1 }}
    <hr />
    <button @click="test1.asdf = 'blah'">Click</button>
  </div>
</template>

<script >
export default {
  data() {
    return {
      test1: { asdf: "HEY" },
    };
  },
  computed: {
    test() {
      return this.test1;
    },
  },

  watch: {
    test: {
      handler: function (val, oldVal) {
        console.log(oldVal, val);
      },
      deep: true,
    },
  },
};
</script>

Já bych asi v tvém případě by jsi měl přidat .native na konci klepněte na událost, jako je tento @click.native="test1.asdf = 'blah'"

Question 3

Jen se snažil tím, že nahradí celý objekt. To funguje docela dobře, a není třeba inicializovat objekt s asdf ubytování v datech:

<v-btn small dark @click="test1 = { ...test1, asdf: 'blah'}">Test</v-btn>

Rozšíření syntaxe ...test1 pomáhá udržet další vlastnosti cílového objektu, pokud existuje, takže můžete bez obav přidat asdf majetek bez obav, že přijdete o něco.

JSFiddle: https://jsfiddle.net/vh72a3bs/22/

Question 4

@BadCoder Objekty a Pole jsou kolem reference v Javascriptu, ne projít podle hodnoty. To znamená, že když přidáte klíč k objektu, jak to děláte ve vaší otázce, jste jen přidává na stejný Objekt. Je to obsah se změnily, ale váš variabilní test1 je stále odkazuje na původní objekt a netuší, že jeho obsah aktualizován. Pozorovatel nemá vybrat to změnit. Můžete přidat deep: true na váš pozorovatel jako další respondent navrhl, ale to jen hodinky pro několik úrovní hluboko, takže není ideální, pokud máte velký objekt s mnoha vnořených dat. Nejspolehlivější způsob, jak vyvolat pozorovatel při jednání s poli nebo objekty, je k vytvoření nové instance objektu. Lze toho dosáhnout s objektem destrukci. Něco jako,

<v-btn small dark @click="test1 = { ...test1, asdf: 'blah'}">Test</v-btn>

funguje, protože vytváříte nový objekt (pomocí předchozí objekty, atributy, plus něco nového), což vyvolalo pozorovatel.

Mohammad · Answer 1 · 2021-11-23T18:49:50

Zkuste tento kód, jeho funguje dobře

<template>
  <div id="app">
    {{ test1 }}
    <hr />
    <button @click="test1.asdf = 'blah'">Click</button>
  </div>
</template>

<script >
export default {
  data() {
    return {
      test1: { asdf: "HEY" },
    };
  },
  computed: {
    test() {
      return this.test1;
    },
  },

  watch: {
    test: {
      handler: function (val, oldVal) {
        console.log(oldVal, val);
      },
      deep: true,
    },
  },
};
</script>

Já bych asi v tvém případě by jsi měl přidat .native na konci klepněte na událost, jako je tento @click.native="test1.asdf = 'blah'"

opravil jsi to přidáním asdf nemovitosti do test1 objekt v datech
@LawrenceCherone jsem rád, že jste právě upravili, můžete odpovědět, aby to znělo méně hrubý. Malé detaily, které pro mě hodně znamená. Na zdraví
Ano přidání "test1: { asdf: "AHOJ" }" se objeví opravit problém; nicméně, počítačová majetek pracuje bez ohledu na počáteční data. Zdá se, pozorovatel je dont práce vůbec při přidávání klíče do objektu?
@BadCoder zdá, že je To složitější chování než to. Jen jsem se snažil s test1 = random() jestli pozorovatel by být spuštěna po druhém kliknutí (takže po majetku asdf byl vytvořen), ale taky to nefungovalo. Nějak Vue nemá rád, když se snažíme vytvořit vlastnost, která ještě neexistuje. Nicméně to funguje velmi dobře, pokud budete aktualizovat celý objekt namísto jeho majetku.
@BadCoder Aktualizace (no, možná bych měl říct "výměna") nadřazeného objektu namísto majetku. Například test1 = { asdf: 'blah' }. Mimochodem, právě jsem si uvědomil, že jsem napsal test1 = random() v posledních komentář, ale myslel jsem, test1.asdf = random().

Ryo Shiina · Answer 2 · 2021-11-23T18:39:30

Jen se snažil tím, že nahradí celý objekt. To funguje docela dobře, a není třeba inicializovat objekt s asdf ubytování v datech:

<v-btn small dark @click="test1 = { ...test1, asdf: 'blah'}">Test</v-btn>

Rozšíření syntaxe ...test1 pomáhá udržet další vlastnosti cílového objektu, pokud existuje, takže můžete bez obav přidat asdf majetek bez obav, že přijdete o něco.

JSFiddle: https://jsfiddle.net/vh72a3bs/22/

Zajímavé. Díky za info. To je divné, že Vue funguje takhle.
@BadCoder souhlasím. Osobně v mé projekty s JS frameworky a knihovnami, vždycky jsem změnit celý objekt tak, jsem si jistý, že žádné aktualizace věci, jako pozorovatelé jsou správně spuštěn. To je, samozřejmě, pokud samotný objekt není příliš velký (výkon stále přetrvávají obavy). Jsem rád, že moje odpověď vám pomohla, prosím nezapomeňte jej označit jako nejlepší odpověď, pokud vám to nevadí!

RuNpiXelruN · Answer 3 · 2021-11-23T19:37:43

@BadCoder Objekty a Pole jsou kolem reference v Javascriptu, ne projít podle hodnoty. To znamená, že když přidáte klíč k objektu, jak to děláte ve vaší otázce, jste jen přidává na stejný Objekt. Je to obsah se změnily, ale váš variabilní test1 je stále odkazuje na původní objekt a netuší, že jeho obsah aktualizován. Pozorovatel nemá vybrat to změnit. Můžete přidat deep: true na váš pozorovatel jako další respondent navrhl, ale to jen hodinky pro několik úrovní hluboko, takže není ideální, pokud máte velký objekt s mnoha vnořených dat. Nejspolehlivější způsob, jak vyvolat pozorovatel při jednání s poli nebo objekty, je k vytvoření nové instance objektu. Lze toho dosáhnout s objektem destrukci. Něco jako,

<v-btn small dark @click="test1 = { ...test1, asdf: 'blah'}">Test</v-btn>

funguje, protože vytváříte nový objekt (pomocí předchozí objekty, atributy, plus něco nového), což vyvolalo pozorovatel.

Jak správně sledovat objekt v Vue?

Otázka

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii