Vue - $refs - CODELINE

Kolejna prosta lekcja o Vue.js. Poznajemy zmienną $refs. Do dzieła.

Markup naszej apki:

<div id="app">
        <input type="text" :value="name" ref="ipt" @input="onInput"/>
        <p>Hello {{name}}</p>
</div>

Mamy tutaj root element (root template) app, input, wartość inputu bindowana do zmiennej name z data, utworzoną referencję do elementu html o nazwie ipt, event listener na event input do metody onInput z methods.

Mamy także interpolację zmiennej name z data.

Ok, apka z poziomu JavaScript:

const app = Vue.createApp({
    data(){
        return {
            name: ""
        };
    },

    methods: {
        onInput(){
           this.name = this.$refs.ipt.value;
        }
    },
    
  });
  
app.mount('#app');

Jak widać korzystamy z referencji przez this.$refs, aby uzyskać dostęp do wartości naszego inputu.

Ok, pobawmy się dalej. Poznajmy v-text:

<div id="app">
        <input type="text" :value="name" ref="ipt" @input="onInput"/>
        <p>Hello <span v-text="name"></span></p>
</div>

Działanie to samo, wartość textContent elementu span bindowana do zmiennej name z data.

Ok, zabawmy się w ukrywanie tego hello, jeśli tekst jest pusty:

<div id="app">
        <input type="text" :value="name" ref="ipt" @input="onInput"/>
        <p v-if="showHello">Hello <span v-text="name"></span></p>
</div>

V-if już znamy, teraz musimy tylko dodać showHello do data oraz utworzyć watchera:

const app = Vue.createApp({
    data(){
        return {
            name: "",
            showHello: false
        };
    },

    methods: {
        onInput(){
           this.name = this.$refs.ipt.value;
        }
    },

    watch: {
        name(value){
            if(value.length > 0)
                this.showHello = true;
            else
                this.showHello = false;
        }
    }
    
  });
  
app.mount('#app');

To najlepszy przykład użycia watchera – obserwuje zmianę name, ale zmienia coś zupełnie innego.

Vue – $refs