Bisakah saya meneruskan parameter dalam properti yang dihitung dalam Vue.Js

apakah ini mungkin untuk melewatkan parameter dalam properti yang dihitung di Vue.Js. Saya bisa melihat ketika memiliki getter / setter menggunakan dihitung, mereka dapat mengambil parameter dan menetapkannya ke variabel. seperti di sini dari dokumentasi :

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

Apakah ini juga mungkin:

// ...
computed: {
  fullName: function (salut) {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}
// ...

Di mana properti yang dihitung mengambil argumen dan mengembalikan output yang diinginkan. Namun ketika saya mencoba ini, saya mendapatkan kesalahan ini:

vue.common.js: 2250 Uncaught TypeError: fullName bukan fungsi (...)

Haruskah saya menggunakan metode untuk kasus seperti itu?

Kemungkinan besar Anda ingin menggunakan metode

<span>{{ fullName('Hi') }}</span>

methods: {
  fullName(salut) {
      return `${salut} ${this.firstName} ${this.lastName}`
  }
}

Penjelasan yang lebih panjang

Secara teknis Anda dapat menggunakan properti yang dihitung dengan parameter seperti ini:

computed: {
   fullName() {
      return salut => `${salut} ${this.firstName} ${this.lastName}`
   }
}

(Terima kasih Unirgyuntuk kode dasar untuk ini.)

Perbedaan antara properti yang dihitung dan metode adalah bahwa properti yang dihitung di-cache dan berubah hanya ketika dependensinya berubah. Suatu metode akan mengevaluasi setiap kali dipanggil .

Jika Anda memerlukan parameter, biasanya tidak ada manfaat dari menggunakan fungsi properti yang dihitung atas metode dalam kasus seperti itu. Meskipun ini memungkinkan Anda untuk memiliki fungsi pengambil parametrized terikat pada instance Vue, Anda kehilangan caching sehingga tidak benar-benar mendapatkan keuntungan di sana, pada kenyataannya, Anda dapat merusak reaktivitas (AFAIU). Anda dapat membaca lebih lanjut tentang ini di dokumentasi Vue https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods

Satu-satunya situasi yang bermanfaat adalah ketika Anda harus menggunakan rajin dan rajin menggunakannya. Situasi ini terjadi misalnya di Vuex . di Vuex itu satu-satunya cara untuk secara sinkron mendapatkan hasil parametrized dari toko (tindakan async). Dengan demikian pendekatan ini didaftar oleh dokumentasi Vuex resmi untuk getternya https://vuex.vuejs.org/guide/getters.html#method-style-access

Anda dapat menggunakan metode, tetapi saya lebih suka masih menggunakan properti yang dikomputasi daripada metode, jika mereka tidak bermutasi data atau tidak memiliki efek eksternal.

Anda bisa memberikan argumen ke properti yang dihitung dengan cara ini (tidak didokumentasikan, tetapi disarankan oleh pengelola, tidak ingat di mana):

computed: {
   fullName: function () {
      var vm = this;
      return function (salut) {
          return salut + ' ' + vm.firstName + ' ' + vm.lastName;  
      };
   }
}

EDIT: Tolong jangan gunakan solusi ini, itu hanya mempersulit kode tanpa manfaat.

Nah, secara teknis kita bisa melewatkan parameter ke fungsi yang dikomputasi, dengan cara yang sama kita bisa melewatkan parameter ke fungsi pengambil di vuex. Fungsi seperti itu adalah fungsi yang mengembalikan fungsi.

Misalnya, di getter toko:

{
  itemById: function(state) {
    return (id) => state.itemPool[id];
  }
}

Pembuat ini dapat dipetakan ke fungsi komponen yang dikomputasi:

computed: {
  ...mapGetters([
    'ids',
    'itemById'
  ])
}

Dan kita dapat menggunakan fungsi yang dihitung ini dalam templat kita sebagai berikut:

<div v-for="id in ids" :key="id">{{itemById(id).description}}</div>

Kita dapat menerapkan pendekatan yang sama untuk membuat metode terkomputasi yang mengambil parameter.

computed: {
  ...mapGetters([
    'ids',
    'itemById'
  ]),
  descriptionById: function() {
    return (id) => this.itemById(id).description;
  }
}

Dan gunakan di template kami:

<div v-for="id in ids" :key="id">{{descriptionById(id)}}</div>

Makhluk ini berkata, saya tidak mengatakan di sini bahwa itu adalah cara yang tepat untuk melakukan sesuatu dengan Vue.

Namun, saya bisa mengamati bahwa ketika item dengan ID yang ditentukan dimutasi di toko, tampilan tidak me-refresh isinya secara otomatis dengan properti baru dari item ini (pengikatan tampaknya berfungsi dengan baik).

Filter adalah fungsi yang disediakan oleh komponen Vue yang memungkinkan Anda menerapkan pemformatan dan transformasi ke bagian mana pun dari data dinamis templat Anda.

Mereka tidak mengubah data komponen atau apa pun, tetapi mereka hanya memengaruhi output.

Katakanlah Anda sedang mencetak nama:

new Vue({
  el: '#container',
  data() {
    return {
      name: 'Maria',
      lastname: 'Silva'
    }
  },
  filters: {
    prepend: (name, lastname, prefix) => {
      return `${prefix} ${name} ${lastname}`
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="container">
  <p>{{ name, lastname | prepend('Hello') }}!</p>
</div>

Perhatikan sintaks untuk menerapkan filter, yaitu | filterName. Jika Anda terbiasa dengan Unix, itulah operator pipa Unix, yang digunakan untuk melewatkan output dari suatu operasi sebagai input ke yang berikutnya.

Properti filter dari komponen adalah sebuah objek. Filter tunggal adalah fungsi yang menerima nilai dan mengembalikan nilai lainnya.

Nilai yang dikembalikan adalah yang benar-benar dicetak dalam templat Vue.js.

Anda juga bisa memberikan argumen kepada getter dengan mengembalikan fungsi. Ini sangat berguna ketika Anda ingin menanyakan sebuah array di toko:

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}
store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

Perhatikan bahwa getter yang diakses melalui metode akan berjalan setiap kali Anda memanggilnya, dan hasilnya tidak di-cache.

Yang disebut Metode-Style Akses dan didokumentasikan pada docs Vue.js .

Anda dapat memberikan parameter tetapi itu bukan cara vue.js atau cara yang Anda lakukan salah.

Namun ada beberapa kasus ketika Anda perlu melakukannya. Saya akan menunjukkan kepada Anda contoh sederhana nilai kelulusan untuk properti yang dikomputasi menggunakan pengambil dan penyetel.

<template>
    <div>
        Your name is {{get_name}} <!-- John Doe at the beginning -->
        <button @click="name = 'Roland'">Change it</button>
    </div>
</template>

Dan skripnya

export default {
    data: () => ({
        name: 'John Doe'
    }),
    computed:{
        get_name: {
            get () {
                return this.name
            },
            set (new_name) {
                this.name = new_name
            }
        },
    }    
}

Ketika tombol diklik, kami meneruskan ke properti yang dihitung dengan nama 'Roland' dan in set() kami mengubah nama dari 'John Doe' menjadi 'Roland'.

Di bawah ini ada kasus penggunaan umum ketika dihitung digunakan dengan pengambil dan penyetel. Katakanlah Anda memiliki toko vuex follow:

export default new Vuex.Store({
  state: {
    name: 'John Doe'
  },
  getters: {
    get_name: state => state.name
  },
  mutations: {
    set_name: (state, payload) => state.name = payload
  },
})

Dan di komponen Anda, Anda ingin menambahkan v-modelinput tetapi menggunakan vuex store.

<template>
    <div>
        <input type="text" v-model="get_name">
        {{get_name}}
    </div>
</template>
<script>
export default {
    computed:{
        get_name: {
            get () {
                return this.$store.getters.get_name
            },
            set (new_name) {
                this.$store.commit('set_name', new_name)
            }
        },
    }    
}
</script>

Saya tidak sepenuhnya yakin apa yang ingin Anda capai tetapi sepertinya Anda akan baik-baik saja menggunakan metode alih-alih dihitung!

computed: {
  fullName: (app)=> (salut)=> {
      return salut + ' ' + this.firstName + ' ' + this.lastName    
  }
}

ketika ingin digunakan

<p>{{fullName('your salut')}}</p>

Dihitung bisa dianggap memiliki fungsi. Jadi, untuk contoh valdiation, Anda dapat dengan jelas melakukan sesuatu seperti:

    methods: {
        validation(attr){
            switch(attr) {
                case 'email':
                    const re = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
                    return re.test(this.form.email);
                case 'password':
                    return this.form.password.length > 4
            }
        },
        ...
    }

Yang akan Anda gunakan seperti:

  <b-form-input
            id="email"
            v-model="form.email"
            type="email"
            :state="validation('email')"
            required
            placeholder="Enter email"
    ></b-form-input>

Hanya perlu diingat bahwa Anda masih akan melewatkan caching khusus untuk dihitung.

Ya ada metode untuk menggunakan params. Seperti jawaban yang disebutkan di atas, dalam contoh Anda sebaiknya menggunakan metode karena eksekusi sangat ringan.

Hanya untuk referensi, dalam situasi di mana metode ini kompleks dan biayanya tinggi, Anda dapat men-cache hasil seperti:

data() {
    return {
        fullNameCache:{}
    };
}

methods: {
    fullName(salut) {
        if (!this.fullNameCache[salut]) {
            this.fullNameCache[salut] = salut + ' ' + this.firstName + ' ' + this.lastName;
        }
        return this.fullNameCache[salut];
    }
}

Catatan: Saat menggunakan ini, hati-hati terhadap memori jika berurusan dengan ribuan