reverse array issue in VueJs - vuejs2

i get conversations message via facebook graph api and i need to reverse data.
in computed reverseChat function i try return this.chat.data works but not reverse() when i try JSON.parse(this.chat).data.reverse() or this.chat.data.reverse() error showing.
console show error
[Vue warn]: Error when rendering anonymous component at C:\Users\PEM\Desktop\src\components\Chat.vue:
SyntaxError: Unexpected end of JSON input
at json.parse (<anonymous>)
at Proxy.render (eval at <anonymous> (app.js:2430), <anonymous>:123:85)
at VueComponent.Vue._render (ever at <anonymous> (app.js:606), <anonymous>:2464:21)
...
sample code in jsfiddle
https://jsfiddle.net/pqrf2vu4/

JSON.parse(this.chat).data.reverse()
works. See Jsfiddle

Related

Vue router return an error in mounted hook

I have an error with Vue-Router, when click to the route-link component wasn't loaded.
[Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read properties of >undefined (reading 'id')"
found in
at assets/organisms/manage/ManageWorkFlowOverview.vue
Do you have an idea of the origin of the problem ?
Thanks in advance.
Best regards,
Jérémy

VueJs + Vee Validate#2 "TypeError: Cannot read property of undefined"

When trying to get form data I am getting the following error in console:
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'validate' of undefined
at _callee$ (AddProduct.vue?eb76:67)
at tryCatch (runtime.js?96cf:63)
at Generator.invoke [as _invoke] (runtime.js?96cf:293)
at Generator.eval [as next] (runtime.js?96cf:118)
at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
at _next (asyncToGenerator.js?1da1:25)
at eval (asyncToGenerator.js?1da1:32)
at new Promise (<anonymous>)
at eval (asyncToGenerator.js?1da1:21)
at VueComponent.addProduct (AddProduct.vue?eb76:67)
My VueJs component : https://pastebin.com/9v2bsEaP
It emits and event that is called from AppVue.
This is it:
https://pastebin.com/FrNzzCn4
I suspect this is caused by validation but I cannot figure out what I miss. Thank you for looking.
I suspect your vee validate isn't instantiated properly. Please if you can read this article: Validation in vue js using vee-validate having error it may help you in the correct direciton.
I checked your code and cant see the import statement as mentioned in the last answer posted in that thread.

Jest unable to load module vue-cookies

console.error node_modules/vue/dist/vue.runtime.common.dev.js:621
[Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read property 'get' of undefined"
found in
---> <Anonymous>
<Root>
console.error node_modules/vue/dist/vue.runtime.common.dev.js:1884
TypeError: Cannot read property 'get' of undefined
at VueComponent.mounted (/home/ubuntu/vue-testing-skel/src/components/ChatApp.vue:66:1)
The line that is causing the error:
this.current_nickname = this.$cookies.get('nickname')
this.$cookies is provided by a module called vue-cookies
I have it installed and saved in my devDependencies, but it seems jest is unable to find it or load it.
I'm not sure what I have to do to make sure Jest is loading these modules properly.
Testing with Jest is meant to be self-contained. This means that global objects like this.$cookies are not available since they are interfacing with the cookies in your browser. The way to solve this is to mock the global functions. More info on how to do that here:
https://lmiller1990.github.io/vue-testing-handbook/mocking-global-objects.html#example-with-vue-i18n
To build off of #Imre_G 's answer, you need to specify a $cookies key inside your mount() or shallowMount() function, like so:
wrapper = shallowMount(ComponentName, {
localVue,
...
mocks: {
$cookies: {
get: jest.fn().mockReturnValue(null),
set: jest.fn(),
}
}
});

v-validate files.every is not a function

i use bootstrap-vue and v-validate in vuejs, When I want to use validation in a input file, I get the following error:
[Vue warn]: Error in event handler for "input": "TypeError: files.every is not a function"
code:
<b-form-file
id="attachment"
name="attachment"
accept="application/zip,image/x-png,image/jpeg"
v-validate="'ext:zip,png,jpeg,jpg|size:10240'">
</b-form-file>

Vue.js render error with Firestore and vuefire

I have a problem in my Vue.js application
Indeed, my component is working properly, however I have errors in the console because it seems to me that the component is rendered several times during its life cycle, and the first time, when it is rendered, it does not find not my races variable at the time of the display because the method db.collection ('courses') has not yet run. How to do?
thank you
My code on JsFiddle:
firestore() { }
https://jsfiddle.net/gf9qhsjr/1/
The Error :
vue.esm.js?efeb:591 [Vue warn]: Error in render: "TypeError: Cannot
read property 'title' of undefined"