Saya memiliki komponen dengan beberapa validasi formulir. Ini adalah formulir pembayaran multi langkah. Kode di bawah ini untuk langkah pertama. Saya ingin memvalidasi bahwa pengguna memasukkan beberapa teks, menyimpan nama mereka di status global dan kemudian mengirimkannya ke langkah berikutnya. Saya menggunakan vee-validate dan vuex
<template>
<div>
<div class='field'>
<label class='label' for='name'>Name</label>
<div class="control has-icons-right">
<input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last">
<span class="icon is-small is-right" v-if="errors.has('name')">
<i class="fa fa-warning"></i>
</span>
</div>
<p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p>
</div>
<div class="field pull-right">
<button class="button is-medium is-primary" type="submit" @click.prevent="nextStep">Next Step</button>
</div>
</div>
</template>
<script>
export default {
methods: {
nextStep(){
var self = this;
// from baianat/vee-validate
this.$validator.validateAll().then((result) => {
if (result) {
this.$store.dispatch('addContactInfoForOrder', self);
this.$store.dispatch('goToNextStep');
return;
}
});
}
},
computed: {
name: function(){
return this.$store.state.name;
}
}
}
</script>
Saya memiliki toko untuk menangani status pesanan dan mencatat nama. Akhirnya saya ingin mengirim semua info dari formulir multi langkah ke server.
export default {
state: {
name: '',
},
mutations: {
UPDATE_ORDER_CONTACT(state, payload){
state.name = payload.name;
}
},
actions: {
addContactInfoForOrder({commit}, payload) {
commit('UPDATE_ORDER_CONTACT', payload);
}
}
}
Ketika saya menjalankan kode ini saya mendapatkan kesalahan itu Computed property "name" was assigned to but it has no setter.
Bagaimana cara mengikat nilai dari bidang nama ke status global? Saya ingin ini gigih sehingga meskipun pengguna mundur satu langkah (setelah mengklik "Langkah Berikutnya") mereka akan melihat nama yang mereka masukkan pada langkah ini
sumber
v-for
pada komputer tanpa setter juga memberikan peringatan ini.Jawaban:
Jika Anda akan
v-model
menghitung, itu membutuhkan penyetel . Apa pun yang Anda ingin lakukan dengan nilai yang diperbarui (mungkin tuliskan ke$store
, mengingat dari situlah pengambil Anda menariknya) Anda lakukan di penyetel.Jika menulisnya kembali ke toko terjadi melalui pengiriman formulir, Anda tidak mau
v-model
, Anda hanya ingin mengatur:value
.Jika Anda ingin memiliki status perantara, yang disimpan di suatu tempat tetapi tidak menimpa sumber
$store
hingga pengiriman formulir, Anda harus membuat item data seperti itu.sumber
:value
berakhirv-model
. Terima kasih!Seharusnya seperti ini.
Di Komponen Anda
Di toko Anda
sumber
this.nameFromStore
secara langsung maka Anda tidak dapat memanipulasi data.Bagi saya itu berubah.
Untuk apa yang dihitung kembali begitu;
sumber
Saya hanya ingin menyebutkan mengapa peringatan ini muncul, setiap kali kita membuat nilai yang dihitung itu getter secara default, kita secara eksplisit perlu mendefinisikan setter untuk properti yang dihitung,
seperti yang disebutkan dalam dokumentasi VueJs, Computed Setter
properti terhitung Anda akan terlihat seperti ini
Cara yang lebih tepat adalah Anda menggunakan
mapState
untuk mendapatkan nama dari toko, dan opsi lain yang Anda tentukan pengambil di toko Anda dan gunakanmapGetters
untuk mengekstrak nama dari toko,Hal penting untuk diketahui: getter di toko digunakan ketika Anda ingin mendapatkan data yang dihitung dari penyimpanan, lalu pada saat itu Anda mendefinisikan logika dalam getter yang membuat Anda mendapatkan data yang dihitung
contoh pengambil
pengambil ini memeriksa status Anda untuk pengguna aktif dan mengembalikan true jika login dan false jika tidak login,
kemudian di seluruh aplikasi kami gunakan
mapGetters
untuk mengekstrakisLoggedIn
properti ini dan menambahkan pemeriksaan sesuai dengan ituberharap seseorang menemukan bantuan ini penuh :)
sumber