I'm currently doing the below:
<script>
export default {
computed: {
editingItem: {
get() {
return this.$store.getters['editing/editingItem'];
},
set(newValue) {
this.$store.commit('editing/UPDATE_EDITING', newValue);
}
},
editingItemName: {
get() {
return this.editingItem.name;
},
set(newValue) {
this.editingItem.name = newValue;
this.editingItem = this.editingItem;
}
}
},
}
</script>
Am I over complicating it? The second line on the editingItemName set(), is a workaround to make the editingItem set() function trigger.
Check this article. it's about forms, but it shows the way to achieve to 2-way binding with vuex.
regarding your special case, see the code. telephone is a nested property inside an object.
myModule.js
const myModule = {
state: {
customerInfo: {
name: '',
telephone: ''
}
},
getters: {
getTelephone(state) {
return state.customerInfo.telephone
}
},
mutations: {
setTelephone(state, payload) {
state.customerInfo.telephone += payload
},
}
}
export default myModule;
form.vue
<template>
<div>
<input v-model="telephone"></input>
</div>
</template>
<script>
export default {
computed: {
telephone: {
get() {
return this.$store.getters['getTelephone']
},
set(value) {
this.$store.commit('setTelephone', value)
}
},
}
}
</script>
Related
I very new in vue, how can mylist random, can get the same value from somerandom
export default {
data () {
return {
somerandom:"foo",
mylist:{
random: this.somerandom
}
}
}
}
You can try with computed property:
new Vue({
el: '#demo',
data () {
return {
somerandom:"foo",
mylist:{
random: ''
}
}
},
computed: {
rand() {
return this.mylist.random = this.somerandom
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<p>{{ rand }}</p>
</div>
model init an object with value.
can set value by default or run func after computed or mounted
data() {
return {
somerandom: '',
someOther: [],
}
},
computed: {
useRandom() {
this.somerandom = this.rand();
}
},
methods: {
rand(){
return 'random';
}
}
I'm trying to fetch some data from an API when some value is updated in a parent component, then use it in a child component. I tried several things but none worked.
Here's a simplified version of my components:
Parent
<template lang="html">
<div id="wrapper">
<h4>My Super Component</h4>
<button v-on:click="setListID">Load another list</button>
<ChildComponent :usernames="usernames"></ChildComponent>
</div>
</template>
<script>
import ChildComponent from "./ChildComponent.vue"
export default {
components: {
ChildComponent
},
data() {
return {
listID: 0,
usernames: undefined,
}
},
watch: {
listID: function(newID) {
this.usernames = getUsernames(newID)
}
},
methods: {
setListID() {
let id = +prompt("Input the list ID");
if (Number.isNaN(id)) {
alert("Please input a valid number");
} else {
this.listID = id;
}
}
},
async mounted() {
this.usernames = await getUsernames(this.listID)
}
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
// Simulating an API call
async function getUsernames(listID) {
sleep(200).then(() => {
switch (listID) {
case 0:
return ['Pierre', 'Paul', 'Jaques']
case 1:
return ['Riri', 'Fifi', 'Loulou']
case 2:
return ['Alex', 'Sam', 'Clover']
default:
return []
}
})
}
</script>
Child
<template lang="html">
<p v-for="username in usernames">{{username}}</p>
</template>
<script>
export default {
props: {
usernames: Object
},
}
</script>
The props I get in the child is a Promise, I tried to pass an Array but as the function that fetches the data is async, and I can't await from watch, I'm kinda stuck.
UPDATE:
I think the issue comes from this code:
// Simulating an API call
async function getUsernames(listID) {
await sleep(200).then(() => {
switch (listID) {
case 0:
return ['Pierre', 'Paul', 'Jaques']
case 1:
return ['Riri', 'Fifi', 'Loulou']
case 2:
return ['Alex', 'Sam', 'Clover']
default:
return []
}
})
return 'returned too early'
}
The function always returns 'returned too early'. When I remove this default return, undefined is returned and my child component uses it as the array.
Try like following snippet
Vue.component('Child', {
template: `
<div class="">
<p v-for="username in usernames">{{username}}</p>
</div>
`,
props: {
usernames: Array
},
})
new Vue({
el: '#demo',
data() {
return {
listID: 0,
usernames: undefined,
}
},
watch: {
listID: async function(newID) {
this.usernames = await this.getUsernames(newID)
}
},
methods: {
setListID() {
let id = +prompt("Input the list ID");
if (Number.isNaN(id)) {
alert("Please input a valid number");
} else {
this.listID = Number(id);
}
},
sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
},
getUsernames(listID) {
return this.sleep(200).then(() => {
switch (listID) {
case 0:
return ['Pierre', 'Paul', 'Jaques']
case 1:
return ['Riri', 'Fifi', 'Loulou']
case 2:
return ['Alex', 'Sam', 'Clover']
default:
return []
}
})
}
},
async mounted() {
this.usernames = await this.getUsernames(this.listID)
}
})
Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div id="wrapper">
<h4>My Super Component</h4>
<button v-on:click="setListID">Load another list</button>
<Child :usernames="usernames"></ChildComponent>
</div>
</div>
Seems like an issue with props you sending array but in the child component you expecting object.
try below code and see
<template lang="HTML">
<p v-for="(username, index) in usernames" :key="index">{{username}}</p>
</template>
<script>
export default {
props: {
type: Object, // or Aarray
default: () => {
return {} // [] if the type is array
}
},
}
</script>
I am trying to query an array in Vuex store where product_id equals a dynamic value like in the below code but it returns undefined.
const store = new Vuex.Store({
state: {
products: {},
},
getters: {
getProductById:(state) => (id) => {
return state.products.find(product => product.data.product_id == id)
},
}
}
In component.vue
<template>
<div> {{price}}</div>
</template>
<script>
export default {
name: 'someName',
//props: ['orders'],
data(){
return{
price: '',
}
},
mounted(){
this.price = this.$store.getters.getProductByProductId(1)
}
}
</script>
Use a computed property that returns a function with id as parameter which returns the getter :
<template>
<div> {{price}}</div>
</template>
<script>
export default {
name: 'someName',
//props: ['orders'],
data(){
return{
price: '',
}
},
computed:{
productById(){
return (id)=>this.$store.getters.getProductByProductId(id)
}
},
mounted(){
this.price = productById(1).price
}
}
</script>
How to binding parent's model to child in Vue.js?
These codes below is works fine. if i fill the input manually, then child's model return it's value to the parent's model.
But the issue is, if the data set from AJAX request in a parent, the input doesn't automatically filled.
Can anyone help me on this?
Form.vue
<template>
<form-input v-model="o.name" :fieldModel="o.name" #listenChanges="o.name = $event"/>
<form-input v-model="o.address" :fieldModel="o.address" #listenChanges="o.address = $event"/>
</template>
<script>
import FormInput from '../share/FormInput.vue'
export default {
data () {
return {
o: {
name: '',
address: ''
}
}
},
components: { 'form-input': FormInput },
created: function() {
axios.get('http://api.example.com')
.then(response => {
this.o.name = response.data.name
this.o.address = response.data.address
})
.catch(e => { console.log(e) })
}
}
</script>
FormInput.vue
<template>
<input type="text" v-model='fieldModelValue' #input="forceUpper($event, fieldModel)">
</template>
<script>
export default {
props: ['fieldModel'],
data() {
return {
fieldModelValue: ''
}
},
mounted: function() {
this.fieldModelValue = this.fieldModel;
},
methods: {
forceUpper(e, m) {
const start = e.target.selectionStart;
e.target.value = e.target.value.toUpperCase();
this.fieldModelValue = e.target.value.toUpperCase();
this.$emit('listenChanges', this.fieldModelValue)
}
}
}
</script>
Things are more straightforward if you take advantage of v-model in components.
If you put v-model on a component, the component should take a prop named value, and should emit input events to trigger it to update.
I like to make a computed to hide the event emitting, and allow me to just v-model the computed inside my component.
new Vue({
el: '#app',
data: {
o: {
name: '',
address: ''
}
},
components: {
'form-input': {
template: '#form-input',
props: ['value'],
computed: {
fieldModelValue: {
get() {
return this.value;
},
set(newValue) {
this.$emit('input', newValue.toUpperCase());
}
}
}
}
},
// Simulate axios call
created: function() {
setTimeout(() => {
this.o.name = 'the name';
this.o.address = 'and address';
}, 500);
}
});
<script src="//unpkg.com/vue#latest/dist/vue.js"></script>
<div id="app">
Name ({{o.name}})
<form-input v-model="o.name"></form-input>
Address ({{o.address}})
<form-input v-model="o.address"></form-input>
</div>
<template id="form-input">
<input type="text" v-model='fieldModelValue'>
</template>
The mounted() hook is blocking subsequent updates from the parent.
Remove mounted and change v-model to 'fieldModel'
<template>
<input type="text" :value='fieldModel' #input="forceUpper($event, fieldModel)">
</template>
<script>
export default {
props: ['fieldModel'],
data() {
return {
fieldModelValue: ''
}
},
// mounted: function() {
// this.fieldModelValue = this.fieldModel;
// },
methods: {
forceUpper(e, m) {
const start = e.target.selectionStart;
e.target.value = e.target.value.toUpperCase();
this.fieldModelValue = e.target.value.toUpperCase();
this.$emit('listenChanges', this.fieldModelValue)
}
}
}
</script>
Demo CodeSandbox
I've use this in my main component:
<contacts :corporation="corporation"></contacts>
contacts component:
export default {
props: {
corporation: {
default: () => []
}
},
data () {
return {
contacts: []
}
},
created() {
this.fetchContacts();
},
methods: {
fetchContacts() {
console.log(this.corporation.slug); // undefined!
CorporationService.users(this.corporation.slug)
.then(({data}) => {
this.contacts = data.contacts;
});
}
}
}
I'm trying to fetch contacts in the contacts component. The problem is that if I console.log(this.corporation.slug);in the method fetchContacts(); the corporation.slug is undefined!
But when I look into vue devtools the corporation prop is being set properly!
What could be going on? Already tried to change:
created() {
this.fetchContacts();
}
to
mounted() {
this.fetchContacts();
}
But that's not working.
Can you use a watch?
Something like this.
watch: {
'corporation.slug': function(slug) {
if(slug){
this.fetchContacts();
}
}
}
Now if parent component changes corporation.slug your child component will fetch contacts automatically.
Your prop default value is whether a value, or a function. But if it is a function, it HAS TO return something:
props: {
corporation: {
default () {
return []
}
}
},