What I want to do
I thought it seems that a search app using QIITAAPI, which was done with Vue.js tutorials using CDN, was considered to fix various things. Currently, Vue-CLI and VUETIFY are made, and now we want to be able to vuex, but it does not behave now.
VUE-CLI and VUETIFY Source Code
Link of this site
If you enter a specific keyword, the QIITA article URL list is displayed.
GitHub link for this whole code
App.vue ↓
< TEMPLATE > ≪ V-App > ≪ V-Card Width= "800px" Class= "MX-Auto MT-5" > ≪ V-Card-Title > ≪ H1 Class= "DISPLAY-1 ML-10" > Login < /H1 > ≪ /V-Card-Title > ≪ V-Form > ≪ v-text-field v-model= "keyword" Label= "Please enter" CLASS= "COL-MD-10 ML-10": COUNTER= "10" /> ≪ ! -Margin, Padding encloses CLASS-> ≪ P > {{Message}} < /P > ≪ UL > ≪ Li V-for= "Item in Items": Key= "Item.id" > ≪ A V-Bind: HREF= "item.URL" TARGET= "_ BLANK" > {{Item.Title} < /A > Likes: {{Item.likes_count}} ≪ /Li > ≪ /UL > ≪ /V-Form > ≪ /V-Card > ≪ /V-APP > ≪ /Template > ≪ Script > IMPORT _ from "LODASH"; IMPORT AXIOS FROM "AXIOS"; export Default { name: "app", DATA () { RETURN { Items: NULL, Keyword: "", Message: "" }; } Watch: { Keyword: Function () { this.message= "Waiting in You to Stop Writing ..."; this.debouncedgetAnswer (); } } CREATED: FUNCTION () { This.debouncedgetAnswer= _.Debounce (this.getAnswer, 1000); } Methods: { getAnswer () { IF (this.keyword=== ") { this.items= null; this.message= ""; RETURN; } this.message= "Loading ..."; Let vm= this; Let Params= {Page: 1, Per_Page: 20, Query: this.keyword}; axios .get ("https://qiita.com/api/v2/items", {params}) .Then (Response= > { Console.log (Response); vm.Items= Response.Data; }) .catch (Error= > { VM.Message= "Error" + Error; }) .Finally (()= > { VM.Message= ""; })) } } }; ≪ /Script >
Source code for those who want to vuex the above, but the source code
This does not move GitHub link of all code
App.vue ↓< TEMPLATE > ≪ V-App > ≪ V-Card Width= "800px" Class= "MX-Auto MT-5" > ≪ V-Card-Title > ≪ H1 Class= "DISPLAY-1 ML-10" > Login < /H1 > ≪ /V-Card-Title > ≪ V-Form > ≪ V-Text-Field V-model= "$ STORE.STATE.KEYWORD" Label= "Please enter" Class= "COL-MD-10 ML-10" : COUNTER= "10" /> ≪ P > {{$ STORE.STATE.MESSAGE} < /P > ≪ UL > ≪ Li V-for= "item in ($ STORE.STATE.ITEMS)": Key= "Item.ID" > ≪ A V-Bind: HREF= "item.URL" TARGET= "_ BLANK" > {{Item.Title} < /A > Likes: {{Item.likes_count}} ≪ /Li > ≪ /UL > ≪ /V-Form > ≪ /V-Card > ≪ /V-APP > ≪ /Template > ≪ Script > IMPORT _ from "LODASH"; IMPORT {MapActions} From "VUEX"; export Default { name: "app", DATA () { RETURN { // }; } Watch: { Keyword () { this. $ STORE.STATE.MESSAGE= "WAITING IN YOU to TO STOP WRITING ..."; this.debouncedgetAnswer (); } } CREATED () {this.debouncedgetAnswer= _Debounce (this.getAnswer, 1000);}, Methods: { ... MapActions (["getAnswer"]) } }; ≪ /Script >
STORE /index.js
Import Vue from 'Vue' IMPORT VUEX FROM 'VUEX' IMPORT AXIOS From 'AXIOS' Vue.use (Vuex) Export Default New Vuex.store ({ STATE: { Keyword: "", Items: NULL, Message: "" } MUTATIONS: { UpdateItems (STATE, ITEMS) { State.Items= Items } } Actions: { getAnswer ({commit}, AuthData) { IF (this.keyword=== ") { this.items= null; this.message= ""; RETURN; } AuthData.Message= "Loading ..."; Let Params= {Page: 1, Per_Page: 20, Query: AuthData.Keyword}; axios .get ("https://qiita.com/api/v2/items", {params}) .Then (Response= > { Console.log (Response); commit ('UpdateItems', Response.Data.Items); }) } } MODULES: { } })
About Error Statement
The error sentence has not come out for some reason ....
Although Guggu is moving your hand for VUEX conversion, it is an honest place .... If it is good, please answer!I'm sorry for the late reply. It has been added to the text, but some reason is that an error statement has occurred.
Masato fromEnglish2021-04-08 00:21:37
-
Answer # 1
The code presented to the question seems to have several issues. (Some errors will be understood if the smallest part is the code where the part is up to work)
First, why not the code of questions is not rooted. That's whose getAnswer's action is no longer called calling .
There is a code that monitors keyword on Watch, but this does not fire because such properties are not present in the first place.Not recommended Writing will be minimally fired if you change as follows, and other problems will see.
diff --git a /src /app.vue b /src /app.vue index 69884ab..5DEC320 100644 ---A /SRC /App.vue +++ B /SRC /App.vue @@ -34, 7 +34, 7 @@ export Default { }; } Watch: { -Keyword () { + ['$ STORE.STATE.KEYWORD'] () { this. $ STORE.STATE.MESSAGE= "WAITING IN YOU to TO STOP WRITING ..."; this.debouncedgetAnswer (); }
Handling of forms | VUEXPlease check. In addition, it is good to be all right (anymore) of VUEX (anymore).
It is recommended that you use what has been meaningful in the variable name and the strings on the screen to properly grasp the contents even if it is for practice. (It was confusing when I saw this question.)
Thank you. Try to do so.
Masato fromEnglish2021-04-08 00:21:37
- javascript : Failed to Mount Component: Template or Render Function Not Defined in Storybook for Vue
- javascript - about the test method and processing when there is no api response
- ajax - communicate with vuejs + axios
- ruby - when i push (), i get the error [vue warn]: error in render: "typeerror: cannot read property'text' of undefined&quo
- vuejs - a cors policy error will occur if product information is acquired and used from the rakuten api
- javascript - i want to delete in real time with real-time chat using pusher, but i can not implement it laravel,vuejs
- javascript - i want to get postal code data (zipcloud api) with vue cli x axios,
- vuejs - regarding the proper use of parameter and body when requesting with axios
- resdata that can be received by get of axios cannot be returned as the return value of the method
- vuejs - when i install axios on nuxt, i get an error message
Is an error or something out?
champon2021-04-08 00:21:37