Comment appeler json dans vuejs

Comment appeler json dans vuejs : 1. Placez json dans le dossier statique 2. Créez l'objet 3. Utilisez la méthode axios pour introduire l'adresse.

L'environnement d'exploitation de cet article : système Windows 7, vue version 2.9.6, ordinateur DELL G3.

Comment ajuster json dans vuejs ?

Comment utiliser VUE pour appeler json local :

Au début, je pensais à quel point il serait difficile d'utiliser Vue pour appeler json. Après cela, je suis d'abord allé sur Baidu et j'en ai trouvé quelques-uns. comme ci-dessus Pour configurer telle ou telle configuration, cela me donne le vertige. Quelqu'un avec une pensée claire et logique n'aura certainement pas cette situation.

Je parlerai de ma situation ci-dessous, et vous pouvez la remplacer en fonction de la situation

Bien sûr, si vous commencez tout juste à créer Vue, vous devez configurer les choses ci-dessous, c'est la situation dans laquelle votre projet peut le faire. run. Je vais le terminer. Trouvez un moyen de référencer json Bien sûr, j'utilise également la méthode d'acquisition axios ici, si ce n'est pas cette méthode, vous pouvez l'utiliser

Tout d'abord, vous devez savoir laquelle. dossier dans lequel votre json doit être placé (référence ordinaire). Ce que vous voulez écrire a ses propres règles et vous pouvez le faire à votre manière. J'en ai vu quelques-uns sur Internet placés dans différents dossiers. Il semble que je doive configurer quelque chose, je n'ai pas regardé attentivement, mais en mode standard, il est préférable de les mettre dans votre dossier statique, comme indiqué ci-dessus

S'il n'est pas placé dans ce dossier, une erreur peut être signalée !

Les données json doivent être écrites selon les spécifications

{
  "status":"0",
  "result":[
   {
     "productId":"10001",
     "productName":"小米6",
     "prodcutPrice":"2499",
     "prodcutImg":"mi6.jpg"
   },
   {
    "productId":"10002",
    "productName":"小米笔记本",
    "prodcutPrice":"3999",
    "prodcutImg":"note.jpg"
   },
   {
    "productId":"10003",
    "productName":"小米6",
    "prodcutPrice":"2499",
    "prodcutImg":"mi6.jpg"
   },
   {
    "productId":"10004",
    "productName":"小米6",
    "prodcutPrice":"2499",
    "prodcutImg":"1.jpg"
   },
   {
    "productId":"10001",
    "productName":"小米6",
    "prodcutPrice":"2499",
    "prodcutImg":"mi6.jpg"
  },
  {
   "productId":"10002",
   "productName":"小米笔记本",
   "prodcutPrice":"3999",
   "prodcutImg":"note.jpg"
  },
  {
   "productId":"10003",
   "productName":"小米6",
   "prodcutPrice":"2499",
   "prodcutImg":"mi6.jpg"
  },
  {
   "productId":"10004",
   "productName":"小米6",
   "prodcutPrice":"2499",
   "prodcutImg":"1.jpg"
  }
  ] }

Une fois le json écrit, il doit être importé. Trouvez un moyen d'appeler ces données Puisqu'il s'agit d'une connexion locale, l'adresse doit être http://localhost. :8080/static/ceshi.json Un tel format

<script>
  import axios from &#39;axios&#39;
  export default{
    data(){
      return {
        res:"",//创建对象
             
      }
    },
    mounted () {
     this.getGoodsList()
    },
    methods: {
     getGoodsList () {
      this.$axios.get(&#39;http://localhost:8080/static/ceshi.json&#39;).then((res) => {
        //用axios的方法引入地址
        this.res=res
        //赋值
       console.log(res)
      })
     }
    }
  }
</script>

<div class="hello">
   <el-table
      :data="res.data.result"
      border
      style="width: 100%">
      <el-table-column
      fixed
      prop="productId"
      label="日期"
      width="150">
      </el-table-column>
      <el-table-column
      prop="productName"
      label="岗位"
      width="120">
      </el-table-column>
      <el-table-column
      prop="prodcutPrice"
      label="手机号"
      width="120">
      </el-table-column>
      <el-table-column
      prop="prodcutImg"
      label="姓名"
      width="120">
      </el-table-column>      
    </el-table>
  
  
 </div>

Recommandé : "Les 5 dernières sélections de didacticiels vidéo vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!