Shulou(Shulou.com)06/02 Report--

This article mainly explains "how to call json by vuejs". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how vuejs calls json".

Vuejs calls json methods: 1, put json in the static folder; 2, create objects; 3, use the axios method to introduce the address.

This article operating environment: windows7 system, vue2.9.6 version, DELL G3 computer.

How does vuejs adjust json?

VUE calls the local json to use:

At first, I thought how troublesome it would be to use vue to retrieve json. After that, I went to Baidu first and found a few. I looked at the above configuration and that. I had a big head, like some clear thinking logic definitely wouldn't happen.

Next, I would like to talk about my situation here. I will substitute it according to the situation.

Of course, if you have just started to create vue, you are going to configure something. What I am talking about below is the situation in which your project can run, and then think of a way to quote json. Of course, I am also using the axios acquisition method here. If it is not in this way, you can pass it.

First of all, you need to know which folder your json should be placed under (general reference). If you want to write with your own specifications, you can do it your own way. I saw several on the Internet under different folders, as if to configure something, I did not take a closer look, but in standard mode, it is best to put it under your static folder, to the above picture

If you don't put it in this folder, you may get an error!

The specification that must be written for json data

{"status": "0", "result": [{"productId": "10001", "productName": "Xiaomi 6", "prodcutPrice": "2499", "prodcutImg": "mi6.jpg"}, {"productId": "10002", "productName": "Xiaomi Notebook", "prodcutPrice": "3999", "prodcutImg": "note.jpg"} {"productId": "10003", "productName": "millet 6", "prodcutPrice": "2499", "prodcutImg": "mi6.jpg"}, {"productId": "10004", "productName": "Xiaomi 6", "prodcutPrice": "2499", "prodcutImg": "1.jpg"}, {"productId": "10001", "productName": "Xiaomi 6" "prodcutPrice": "2499", "prodcutImg": "mi6.jpg"}, {"productId": "10002", "productName": "Xiaomi Notebook", "prodcutPrice": "3999", "prodcutImg": "note.jpg"}, {"productId": "10003", "productName": "Mi 6", "prodcutPrice": "2499", "prodcutImg": "mi6.jpg"} {"productId": "10004", "productName": "Xiaomi 6", "prodcutPrice": "2499", "prodcutImg": "1.jpg"}]}

After the json is written, it needs to be introduced. Find a way to call these data. Because the address is locally connected, it must be in the format of http://localhost:8080/static/ceshi.json.

Import axios from 'axios' export default {data () {return {res: ", / / create object}}, mounted () {this.getGoodsList ()} Methods: {getGoodsList () {this.$axios.get ('http://localhost:8080/static/ceshi.json').then((res) = > {/ / introduce the address this.res=res / / assign console.log (res)} by axios)} To this point I believe you have a better understanding of "how vuejs calls json", so you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.