Menggunakan Directive Menggunakan Two-Way Computed Property Di Vue Js

Apa yang dimaksud dengan direktif v-model Vue.js?

Jika Anda seorang developer Vue.js, Anda mungkin pernah mendengar beberapa directive v-model yang sangat menarik.

Directive v-model adalah pendekatan yang sangat berguna dan bersih untuk mengikat perubahan pada suatu nilai dan melisten perubahan yang memengaruhi nilai tersebut. Atau, secara teknis, v-model adalah directive kuat yang disediakan oleh VueJS untuk menambahkan pengikatan data dua arah ke vanilla Vue.js.

Implementasi directive v-model dengan properti yang dihitung

Sebelum kita mulai menerapkan v-model, kita perlu memahami cara kerja internal dari directive v-model.

v-model = ”dataProperty” terlihat ajaib pada pandangan pertama, tetapi sebenarnya


<input :value="dataProperty" @input=dataProperty = $event.target.value" />

Secara default, vmodel dievaluasi setiap kali peristiwa input terjadi (yaitu, saat keydown atau paste). Jika Anda ingin menunggu hingga pengguna selesai mengetik dan memburamkan kolom input (mengklik di luar kolom input), Anda dapat menggunakan lazy modifier untuk v-model.


<input v-model.lazy="value" />

Dalam file CoustomSearchInput.vue, buat component kustom yang menerima props (value, optionsArr, placeholderValue).

<template>
  <div class="container">
    <input ref="inputField" v-model="inputVal" class="val-input" type="text" :placeholder="placeholderValue /><!-- options Dropdown --><div class="data-options" v-if="filterOptionArray.length > 0" :class="{ 'd-none': openFlag }" >
      <div ref="dataDiv" class="general-modal-scroll-bar">
        <li
          v-for="option in filterOptionArray"
          :key="option"
          class="item"
          @click=" inputVal = option;
            $emit('input', option); " >
          {{ option }}
        </li>
      </div>
    </div>
  </div>
</template><script>
export default {
  name: "SearchInput",
  props: {
    optionsArr: {
      type: Array,
      default: () => [],
    },
    value: {
      type: String,
      default: "",
    },
    placeholderValue: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      inputVal: "",
      openFlag: true,
    };
  },mounted() {
    this.inputVal = this.value;
    // Closing the options panel on load of the component
    document.addEventListener("click", this.close);
  },
  beforeDestroy() {
    // Closing the options panel on leaving the component
    document.removeEventListener("click", this.close);
  },// this computed property is responsible for the fitering the array according input value
  computed: {
    filterOptionArray() {
      if (this.inputVal.length === 0) {
        return this.optionsArr;
      } else {
        return this.optionsArr.filter((option) => {
          let temp = option.toLowerCase();
          return temp.match(this.inputVal);
        });
      }
    },
  },// keep a watch on inputVal if it's value change then we close the options Panel
  watch: {
    inputVal(newVal) {
      this.openFlag = false;
    },
  },
  methods: {
    // Options Panel close method
    close(e) {
      if (
        e.target !== this.$refs.dataDiv &&
        e.target !== this.$refs.inputField
      ) {
        this.openFlag = true;
      }
    },
  },
};
</script>

Oleh karena itu, kami mendapatkan nilai sebagai penyangga dari component parent. Manipulasi langsung data prop tidak diperbolehkan menurut pola desain Vue 2. Untuk mengatasi ini, buat inputVal properti data lokal, simpan data props nilai di inputVal, lalu ikat inputVal ke field input.

Sekarang kita membuat properti terhitung filterOptionArray yang bertanggung jawab atas opsi yang dapat dipilih dari dropdown sebagai input pengguna. Properti terhitung ini mengembalikan larik yang digunakan untuk menampilkan daftar turun bawah.

Saat pengguna mengklik item daftar drop-down, sebuah event emits untuk memberi tahu orang tua tentang perubahan tersebut.

File component-App.js parent.

<template>
  <div id="app">
    <CustomSearchInput
      :optionsArr="arr"
      v-model="selected"
      placeholderValue="Enter start typing to get options"
    /><div class="display-data" v-if="selected.length > 0" >Selected Value: {{ selected }}</div>
  </div>
</template><script>
import CustomSearchInput from "./components/CoustomSearchInput";
export default {
  name: "App",
  components: { CustomSearchInput },
  data() {
    return {
      arr: ["jhon", "jay", "shiv", "jani", "shawn", "shelly", "bob", "carry", "Alex", "Anthoney" ],
      selected: "",
    };
  },
};
</script>

Coba kodenya di sini

Anda dapat menggunakan metode ini untuk menggabungkan properti terhitung dengan v-model untuk menulis kode yang paling kuat dan terbaik di Vue.js.

Catatan tambahan:

Jika Anda ingin memasukkan input pengguna ke angka instead string, tambahkan pengubah v-model.number.
Pengubah v-model.trim menghapus spasi spasi awal atau akhir dari string terikat. (Tidak dapat digunakan dalam kombinasi dengan v-model.number).

Selamt mencoba semoga sukses kawan :)

Menggunakan Directive Menggunakan Two-Way Computed Property Di Vue Js

Artikel Lainnya :