Vue: Showing that the function does not exist when I have defined it the relevant store - vue.js

I am currently working on a simple app to store workout routines in Nuxt 3 and Appwrite. The link to the source code is here.
After logging in and adding in some workouts in the app's UI, whenever I try to call the deleteWorkout function, I get an error in the console saying that the function is not defined, whereas I have clearly defined in the workoutStore. I can't seem to figure out the reason for the same.
The same can be seen in the given screenshot.
Console on clicking the delete button
PS:
Most probably the error should be originating from either /pages/workouts.vue, /components/WorkoutDetails.vue or /stores/workout.js.
I am using Appwrite to manage the back-end of the web app, and the instructions to setup the same can be found in the README.md. (Though I don't think the error I am facing is related to the same.)

In your code the problem is, you declear your deleteWorkout() function outside of the actions block in workout.js file.
Make sure all your functions in the workout store are inside the actions block. Then it will be accessable from the vue component

Related

Piranha CMS: Problem with custom block in manager interface

I am trying to add a custom block. I followed the steps in following two links:
http://piranhacms.org/docs/extensions/blocks
and
http://piranhacms.org/docs/manager-extensions/resources
In the CMS manager, I added the custom block to a page, but the block content is empty. Looks like the Vue.js didn't get associated to the custom block. I have set the block component attribute to the Vue.js.
I added the Vue.js by calling below method in the startup. Did I miss something to create a custom block?
App.Modules.Get<Piranha.Manager.Module>().Scripts.Add("~/assets/js/myscripts.js");
Move your "mycustomblock.js" file to the folder "wwwroot/js/" instead of the default "assets/js/". That way the file will be visible to Vue.js
Something is not working with the assets folder, probably it cannot be reached by Vue.js
after the Project is compiled. I had the same problem and this solution worked for me.
void Configure in Startup.cs will then look something like this (I simplified the syntax a bit compared to the documentation):
App.Modules.Manager().Scripts.Add("~/js/mycustomblock.js");
Adding a custom block and many other tasks have been difficult for me. Trial and error, and no knowledgebase to fall back on. The documentation is a fantastic start, and "Step by step" guides would be a good idea for the future (but I guess time is very limited).

The keyPrefix reduxPersist: is already in use

Pressing Cmd + I on ios simulator, I receive an error :
"The keyPrefix reduxPersist: is already in use. Multiple clients cannot share the same keyPrefix. Provide a different keyPrefix in the offlineConfig object."
Im using appSyncClient and not using redux. Error refers to new AWSAppSyncClient
The problem was that when I create new AWSAppSyncClient, I have set "disableOffline" property to false, after I changed it, everything works as expected.
This issue occurs when multiple appsync clients are being created with same keyPrefix, lets say in a scenario while creating react app, if multiple rerenders are happening and client is created inside render function of class component, then client will be created multiple times and it will thow this error. Moving creating appsync client outside the react component solved this error for me.

Persistent React-Native error that goes away with Remote Debugging enabled

I'm building a React-Native app and whenever I run it on my Android emulator, I get this error:
Objects are not valid as a React child (found: object with keys
{$$typeof, type, key, ref, props, _owner, _store}). If you meant to
render a collection of children, use an array instead.
throwOnInvalidObjectType
D:\rn\manager\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7436:6
Because this error means nothing to me, I decide to enable "Debug JS Remotely" in Chrome to see if I can get an error I understand. But with Debug Remotely enabled, the error goes away.
If I build the project and install the app on a real device, the errors come back.
But I feel like I'm stuck in a catch-22 because if I try to debug, I get no errors, and if I turn off debugging, I get errors.
Is there anyway to get around this?
Thanks!
The error mentions you use an object in your render() method where you shouldn't. Since you did not post any code, here is what you could do:
Keep removing elements from your render() method until you no longer get the error. Once it is gone, start placing code back until you hit the error again. The code causing the error will be or return an object, possibly a typo causing an object to be returned instead of a string for instance.
TL;DR: Stopped using firebase and used react-native-firebase instead
The problem for me wasn't the render method in any of my components or classes. I realized after trying the answer above, I basically removed all my files, and was left with one file. I changed the render method to display text inside one view, but I still got the error.
Then I started removing the modules I was importing inside that file one by one and found that it was the firebase module uninstalled firebase and installed react-native-firebase.

Menu Items are not getting displayed

I implemented WL.OptionsMenu in android environment as specified in Worklight APIs(android/js/mainApp.js). If menu option is clicked, I've given a callback function . Its working fine if the callback resides in the same file. But the implementation of that callback is resided in android/native/common/js/mainApp.js file. Hence, its not showing the menuOptions in android mobile. How to solve this problem?
Edit your question with the contents of mainApp.js
There is no such path, in Worklight, as android/native/common/js/mainApp.js.
Perhaps you mean android/native/assets/www/default/common/js/mainApp.js, but then again, it is exactly the same as android/js/mainApp.js.
The only difference is that android/native/assets/www/default/common/js/mainApp.js is created after you build your application.
There is no reason why it should not work.
Again, edit your question with the contents of mainApp.js and the steps you have taken from creating the project, to running it in your device/emulator.

how begin with appcelerator for desktop (and use the API's)

I've a bit experience with qt+ and creating not so complex web pages, but I don't know how begin with titanium...when I run the default app this work...I can change the index.html like a web page...I can include javascript code and jquery too...very nice...but when I try run api functions I don't know how include these...all examples talk about iphone and a app.js file...I'm trying make a desktop app and don't appear any .js...I can create these but don't work
...in the docs I read things like these:
var win = Ti.UI.createWindow(); var view = Ti.UI.createView({backgroundColor:"red"}); win.add(view); win.open();
I don't know where I've put this code...I try put it inside a javascript inside the html (bad practice!) but it don't work...I put it inside a function onload but don't work neither.....there are any "convention" with the names for the files for this work?...I think this is like create a very dynamic web page but I don't know how work with the api....I see the example "kitchen something" but it wasn't so clear to mee...I see a examples like this:
http://mobile.tutsplus.com/tutorials/appcelerator/appcelerator-using-json-to-build-a-twitter-client/
but seems this work different when is an ipod to when it is a desktp app...I create an app.js (like the tuto) and put my code inside it but it never run...I look the source code and only need create a .js and inside my "home.html" link it..but it don't work...I create a index.js too but it don't work neither
please help..I'm very noob...thanks
Aaron:
This reply kindly brought something that could have been a solution but just made me lose more than 15 minutes of my time, as these first online courses have info about how to create a new project with a default html file, not about the original poster's issue.
The original poster's issue is that he has a new project with an index.html file, but no app.js file.
And he then doesn't understand where he could put the sampe code :
var win = Ti.UI.createWindow();
var view = Ti.UI.createView({backgroundColor:"red"});
win.add(view);
win.open();
... as whatever he puts in app.js is not executed.
The documentation in Titanium Dev Center fails to provide accurate information as it only mentions Titanium Mobile app.js and does not speak of index.html in the application structure.
After some starting experience on Titanium Mobile, I had to work on Titanium Desktop andactually just had the same problem as angel_ang, which brought me here.
So, here is the real answer :
Titanium Desktop applications do not need or start with an app.js file, but with index.html.
Deleting or removing this file never works as it will still be launched from the last build if need be.
Adding anything to app.js will never run as only index.html is run as a starting place.
Something that should have been a solution was found that to the following link:
http://www.youtube.com/watch?v=lgGVNB2nkKc&NR=1
This video is two online courses further from the link supplied by Aaron. At 0.19 seconds exactly, we see the starting code he has added to index.html.
You need to put a ... in your HEAD section, and add a function() there.
You may put the sample code inside this function.
Then you may even set the function to run when you click a button ().
Unfortunately, this doesn't work with me either.
I tried with the example code above but also with the other example (notification) mentioned in the online course.
It just seems that something is deprecated here and many documentations are outdated.
Anyone that could answer to this situation would be very helpful to us and many newcomers.
We just have an index.html that we can't use, instead of a running app.js file.