Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
Improve this question
I have a method: openMenu() in component A.
I want to call this method in component B.
There are $root, Event bus, and Vuex, what should I do in this case?
What is the best practice?
you can use the emit.
in the component A:
mounted() {
this.$root.$on("callMyMethod", () => {
this.myMethod();
});
},
methods: {
myMethod() {
// do something
},
},
and in the component B:
methods: {
doSomething() {
this.$root.$emit("callMyMethod");
},
},
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 12 days ago.
This post was edited and submitted for review 9 days ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
I have implemented a 2FA in firebase using some sort of a hack. When the user log in they enter phone number and password. On the background I append the company domain to the phone and then signInWithEmail. The next step is to request OTP using the same provided number. For some reason this does not feel natural, because technically I am login in twice. Is there a better way to implement this? Below is my current implementation
const onLogin = async (phone: string, password: string) => {
setLoading(true);
try {
const res = await loginWithEmailAndPhoneNumber(phone, password);
if (res.user) {
// request otp
const confirmation = await auth().signInWithPhoneNumber(`+${phone}`);
if (confirmation) {
setOtpConfirmer(confirmation);
}
}
setLoading(false);
const newUser = new UserInterface();
newUser.id = res.user?.uid || '';
newUser.phoneNumber = phone;
// store user data in async storage
setUserData(newUser);
setUser(newUser);
console.log('user', user);
} catch (err: any) {
console.error(err);
setError(err.message);
}
setLoading(false);
};
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 10 months ago.
Improve this question
I need not to remove the api Key when refreshing the page and this is my code
You just have to get your previously added cookies and dispatch them on mounted events. Add this lines:
computed: {
apiKey() {
return this.$store.getters['getApiKey'];·
},
methods: {
setApiKey(apiKey) {
this.$store.dispatch('setApiKey', apiKey);
},
singIn() {
loginUsers(this.email, this.password, this.setApiKey);·
setTimeout(() => ·{
this.$cookies.set('apiKey', this.apiKey, {
path: '/',
maxAge: 31536000,
}),
}, 1000);
},
},
mounted() {
let apiKey = this.$cookies.get('apiKey'); // Get previously set cookies
this.$store.dispatch('setApiKey', apiKey); // Dispatch action
}
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 1 year ago.
I have vue2 component where I want to access a data object variable to use in template. Pertinent code:
Template:
<div v-html="theWivesBios[currentWife]" class="modal-content"></div>
Script:
export default {
name: "theSixWives",
data() {
return {
theWivesBios: theWivesBios,
currentWife: ""
};
},
mounted() {
elContainer.addEventListener("click", function(ev) {
//Want to manipulate this.currentWife in callback
this.currentWife = "testing"; // this.currentWife isnt available to vue instance
}
What would be best way to "hoist" this.currentWife so the vue instance would have access to it for use in my template?
You have to use an arrow function like this:
export default {
name: "theSixWives",
data() {
return {
theWivesBios,
currentWife: ""
};
},
mounted() {
elContainer.addEventListener("click", () => {
this.currentWife = "testing";
});
}
}
This answer explains very well how this works on regular and arrow functions:
https://stackoverflow.com/a/20279485/7699022
Hope it helped!
This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 5 years ago.
I'm trying to get access to my store data from a mounted method of my component. It works fine if I try it with a not mounted method. After I read a bit it makes sense that I've no access, but is there any other way I didn't find yet?
methods: {
testEvent() {
// works
let players = this.$store.state.players;
console.log(players);
},
socketEvent() {
// Uncaught TypeError: Cannot read property 'state' of undefined
socket.on('dice_data', function(data) {
let players = this.$store.state.players;
console.log(players);
});
}
},
mounted() {
this.socketEvent()
}
Thank you
Issue is with this inside function
You can solve like this:
socketEvent() {
socket.on('dice_data', (data) => {
let players = this.$store.state.players;
console.log(players);
});
}
or if you prefer to write function, instead of arrow function you can also do like this:
socketEvent() {
let self = this
socket.on('dice_data', function(data) {
let players = self.$store.state.players;
console.log(players);
});
}
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
I'm starting with vue.js. My question is about design patterns.
Should I have multiple Vue instances like this one:
var example = new Vue({
el: '#post-list',
data: {
posts: [
{ title: 'Foo' },
{ title: 'Bar' }
]
}
});
var example2 = new Vue({
el: '#post-list2',
data: {
posts: [
{ title: 'Foo' },
{ title: 'Bar' }
]
}
});
Or should I try to group my Vue code inside a big #app element like this:
var app= new Vue({
el: '#app',
data: {
posts1: [
{ title: 'Foo' },
{ title: 'Bar' }
],
posts2: [
{ title: 'Foo' },
{ title: 'Bar' }
]
}
});
I'm looking for code maitenance and performance. What are the advantages of each approach? Is there a better pattern to follow?
For code maitenance, Single File Component, which serves the same purpose as your first code snippet but more engineeringly is suggested, by the way, vue-cli maybe a tool you need.
For code performance, many instances cost more than one instance. But one flaw cannot obscure the splendor of the jade. Insignificant lose of performance brought maintainability is acceptable.