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
}
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);
};
Hi i'm currently using scheduler from devextrem. I'm using data from MongoDB using a CustomStore to receive and send data from scheduler's form to my api route.
Everything is working nice only if i reload the page. New data doent's appear after adding, modifying or removing appointment.
How can i see changes done in the scheduler in a dynamic way?
const myCustomStore = new CustomStore({
key: '_id',
loadMode: 'raw', // omit in the DataGrid, TreeList, PivotGrid, and Scheduler
load: () => {
// ...
},
insert: (values) => {
// ...
},
remove: (key) => {
// ...
},
update: (key, values) => {
// ...
}
export default {
components: {
DxScheduler,
DxResource,
DxScrolling,
},
data() {
return {
// ...
customDataSource
};
Maybe i could reload my component or just the modified cell or the whole page, i don't really find any solutions, could you please help?
If you need more to know on my project to answer my question please ask!
Thanks
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");
},
},
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.