Vue i pristupanje varijabli(?) unutar elementa

Programiranje
1

Pomoć vue-ovci :slight_smile:
Danas se hvatam vue.js

I naravno naletih na meni problem: kako koristiti vue da mogu svakoj message pristupiti ovisno o id elementa unutar koje se taj message nalazi?
Sa jQuery bih to napravio u stilu $("#div-1").message, ali kako to napraviti s vue?

Situacija je: kliknem gumbić za (npr) rezultat u div-2 elementu, on pozove vue metodu i ona izmjeni message samo za taj div-2 (ostale divove ne dira)
Primjer html-a:

<div id="div-1">
    {{message}}
</div>

<div id="div-2">
    {{message}}
</div>
    
<div id="div-3">
    {{message}}
</div>

Hvala!

2

Misim da ti to tako nece ici, al ces odje naci to sto trazis

Uglavnom funkcionise isto kao na PHP kad listas sa foreach. Mada nisam dugo koristio Vue, jedne prilike samo kad sam pravio neki chat na verziji 1, svidja mi se sto jos uvijek radi.

I ti samo posle dodas tipa delete edit itd imas pri dnu npr za delete.

3

Nije to to, pregledao sam docs i ne mogu naći nešto što bi mi pomoglo.
Jexeš takav “poboljšani” FW kad moram za svaki klik zasebnu funkciju pisati.

Uglavnom, pokušao sam sa:

new Vue({
    el:'#app #div-2',
    data:{
        message: 'Stari rezultat'
    },
    methods:{
        LoadForm:function(){
            this.message="Novi rezultat";
        }
    }
});

Ali ne pali.
Izlgeda da ću morat za svaki gumbić morat pokrenut novu instancu i napisat generalno istu funkciju. Da imam 10 gumbića, 10x bih trebao pokretati nove instance i pisati iste funkcije…

Daj nek netko veli da nije to tak, ne mogu vjerovat da je tako ispravno…

4

Pa i ne treba tebi treba ovo zapravo https://todo-vue.herokuapp.com/
U prevodu imas odje pa ces brzo skuzit https://scotch.io/tutorials/build-a-to-do-app-with-vue-js-2
Znaci dje ce tebi listat poruke i dje ces ti odredjenu moci promijenit ako sam dobro razumio.

5

Evo ti i odje https://jsfiddle.net/jpeter06/ppyeo1tg/ jos mozda jednostavnije

6

@dmitrecic

Je l’ ovako možda?

7

To samo sto on zeli za svaku poruku, a da ne unosi message1 message2 itd.

1 Like
8

Ne.
Ovaj stil:

<button id="btn-1">Prvi button</button>
<button id="btn-2">Drugi button</button>
<button id="btn-3">Treći button</button>

<div id="div-1">Prvi tekst</div>
<div id="div-2">Drugi tekst</div>
<div id="div-3">Treći tekst</div>

Pa kad kliknem “Prvi button” da se u #div-1 tekst promjeni u “Stisnut je prvi button”
Isto to i za drugi i treći button.

9

Po ovome bih treba gumbiće pustit kroz loop da bi ih prikazao i vezao uz njih evente.
Nije mi to baš praktično i nije baš točno ono što sam tražio, ali moglo bi biti kao “workaround”

10

Dakle da izjasnim konkretan “problem”:
Imam stranicu (page) na kojoj imam 3 taba (gumbića)

  1. unos proizvoda
  2. uređivanje proizvoda
  3. ulaz/izlaz proizvoda

Ovisno o tome koji se gumbić klikne, u prostoru ispod tih tabova treba se učitat pripadajuća forma.

Obzirom da želim to napravit u Vue, ne želim koristit jQuery (iako bih s njim bio gotov u roku manjem od 5 min, i napravio bih samo jednu funkciju koja bi to odradila, i bila bi možda 4-5 redova jer bih ajaxom dohvaćao i prikazivao vanjske pripadajuće forme).

Dakle, kako to riješiti sa Vue (ne trebam ovaj ajax dio, s time ću se kasnije poigrati koristeći axios).

11

Eno sam malo preuredio isti link.
Možda nije najbajnije ali moguće da radi.
Sačekaj onog što mu ime počinje na B a završava na elmin pa će ti vjerujem pokazati kako se to radi pomoću ref-ova, watcher-a ili ko zna čega još. :slight_smile:

Edit (kod ukol’ko se izmijeni na samom linku)

<div id="app">
  <div class="buttons">
    <button id="btn1" @click='loadForm($event)'>Btn 1</button>
    <button id="btn2" @click='loadForm($event)'>Btn 2</button>
    <button id="btn3" @click='loadForm($event)'>Btn 3</button>
  </div>
  <div class="texts">
    <div id="text1">{{messages.div1}}<div>
    <div id="text2">{{messages.div2}}<div>
    <div id="text3">{{messages.div3}}<div>
  </div>
</div>

new Vue({
    el:'#app',
    data:{
        messages: {
            div1: "Neka Forma 1",
            div2: "Neka Forma 2",
            div3: "Neka Forma 3"
        }
    },
    methods:{
        loadForm: function (e) {
          let btn = e.target.id.substring(3);
          let text = 'div' + btn;
          this.messages[text] = 'Nova vrijednost zavisno od button-a ' + btn;
        }
    }
});
1 Like
12

Riješio i ja ovako:

<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#unos" v-on:click="LoadFormUnos"><i class="far fa-plus-square"></i> @lang('text.unos')</a></li>
<li><a data-toggle="tab" href="#edit" v-on:click="LoadFormEdit"><i class="far fa-edit"></i> @lang('text.edit')</a></li>
<li><a data-toggle="tab" href="#kartica" v-on:click="LoadFormCard"><i class="fas fa-exchange-alt"></i> @lang('text.ulaz-izlaz')</a></li>
</ul>
<div class="tab-content bg-light p-15">
    <div id="unos" class="tab-pane fade in active">
        <h3 class="border-bottom">Unos artikla</h3>
        @{{content_unos}}
    </div>
    <div id="edit" class="tab-pane fade">
        <h3 class="border-bottom">Uređivanje artikla</h3>
        @{{content_edit}}
    </div>
    <div id="kartica" class="tab-pane fade">
        <h3 class="border-bottom">Kartica artikla</h3>
        @{{content_card}}
    </div>
</div>

<script>

// ajmo sa vue se igrat..

var loadscript=new Vue({
    el:'#app',
    data:{
        content_unos: 'Loading',
        content_edit: 'Edit',
        content_card: 'Card'
    },
    methods:{
        LoadFormUnos:function(){
            this.content_unos= 'Klik na unos';
        },
        LoadFormEdit:function(){
            this.content_edit='Klik na edit';
        },
        LoadFormCard:function(){
            this.content_card='Klik na karticu';
        }
    }
});

</script>

Ukratko, jedna instanca, nekoliko metoda. Mislim da je bolje nego palit 3 instance…

Ajmo sačekat ono sa B i elmin pa ćemo bit pametniji kako to izvest da bude čitljivo, kratko i - ispravno :slight_smile:

13

Da mislim da je belmin tako nesto, ja ovako https://jsfiddle.net/jn7t29vq/
Ali eventualno moras imat metod kako bi upisivao u bazi taj novi naslov koji zelis. I nema potrebe da imas milion bottom ili poziva za svaki upis kad to sve resavas sa v-for Jer sad ne znam za cem ti treba to verovatno da oznacis da je gotovo ili nije. Tako da ces verovatno samo menjat dio iz objavljen u neobjavljen, ako ti treba za cijelu poruku najbolje duble click edit ili eventualno da imas jedan buttom gde ce ti iskocit da uneses novi upis za tu poruku.

14

Evo i onog sto mu ime pocinje na B a zavrsava na elmin - sorry nisam vidio prije, imali smo neki Hackathon u firmi, pa sam bio posvecen vecinom tome.

Davno je bilo kad sam ja zadnji put koristio VueJS, ali nadam se da nisam zaboravio :slight_smile:

Ovo bi bio neki moj pristup kako bih ja rijesio stvari https://codepen.io/anon/pen/oJrPWY vezano za ovaj specificni primjer.

@dmitrecic ako zelis onu standardnu tabbed navigaciju, gdje kliknes na tab i content se promijeni, onda baci pogled na ovo https://jsfiddle.net/chrisvfritz/o3nycadu/

1 Like
15

E to je to što mi treba :slight_smile:
Sad se igram a axiosom, api-em, tokenima…
Bit će nešto od mene :smiley: