从 Vue.js 中的 JSON 文件导入数据而不是手动数据

Posted

技术标签:

【中文标题】从 Vue.js 中的 JSON 文件导入数据而不是手动数据【英文标题】：Import data from a JSON file in Vue.js instead of manual data 【发布时间】：2019-04-08 16:12:55 【问题描述】：

这是我第一次使用 Vue.js。我制作了这个应用程序，它使用了我在脚本中手动添加的数据。现在我希望能够添加一个从中获取数据的 JSON 文件，但我不知道该怎么做。您可以在下面找到我的代码。

html：

<div id="app">

<div class="search-wrapper">
    <input type="text" v-model="keyword" placeholder="Zoek telefoon..." />
</div>

<div class="wrapper">

    <table style="width:100%; text-align: left;">
      <tr>
        <th style="text-align: left; width: 33%">Telefoon</th>
        <th style="text-align: left; width: 33%">Scherm</th> 
        <th style="text-align: left; width: 33%">Batterij</th>
      </tr>
    </table>

    <div v-for="post in filteredList">        
        <table style="width:100%; text-align: left">
          <tr style="text-align: left;">
            <td style="text-align: left; width: 33%"> post.title </td>
            <td style="text-align: left; width: 33%"> post.scherm </td> 
            <td style="text-align: left; width: 33%"> post.batterij </td>
          </tr>
        </table>
    </div>

</div>

Vue.js：

var app = new Vue(
  el: '#app',
  data: 
    keyword: '',
    postList: [
       title: 'A', scherm: '35', batterij: '15' ,
       title: 'B', scherm: '65', batterij: '25' ,
       title: 'C', scherm: '40', batterij: '35' ,
       title: 'D', scherm: '35', batterij: '75' ,
       title: 'E', scherm: '20', batterij: '45' ,
    ],
  ,
  computed: 
    filteredList() 
      return this.postList.filter((post) => 
        return post.title.toLowerCase().includes(this.keyword.toLowerCase());
      );
    
  
);

编辑： 我的代码现在看起来像这样，但它现在只返回 post.title 等。

头：

<head>
<title>Test Vue JSON</title>
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>

HTML： 

<div class="search-wrapper">
    <input type="text" v-model="keyword" placeholder="Zoek telefoon..." />
</div>

<div class="wrapper">

    <table style="width:100%; text-align: left;">
      <tr>
        <th style="text-align: left; width: 33%">Telefoon</th>
        <th style="text-align: left; width: 33%">Scherm</th> 
        <th style="text-align: left; width: 33%">Batterij</th>
      </tr>
    </table>

    <div v-for="post in filteredList">        
        <table style="width:100%; text-align: left">
          <tr style="text-align: left;">
            <td style="text-align: left; width: 33%"> post.title </td>
            <td style="text-align: left; width: 33%"> post.scherm </td> 
            <td style="text-align: left; width: 33%"> post.batterij </td>
          </tr>
        </table>
    </div>

</div>

脚本：

import posts from "../posts.json";

  el: '#app',
  data: 
    keyword: '',
    postList: [],
  ,
  computed: 
    filteredList() 
      return this.postList.filter((post) => 
        return post.title.toLowerCase().includes(this.keyword.toLowerCase());
      );
    
  ,
  mounted()
   axios
       .get('posts.json')
       .then(response => (this.postList = response.data))

JSON（posts.json）：

  [
     title: "Samsung Galaxy S9", scherm: "35", batterij: "15" ,
     title: "Huawei P10", scherm: "65", batterij: "25" ,
     title: "iPhone X", scherm: "40", batterij: "35" ,
     title: "Huawei P20 Lite", scherm: "35", batterij: "75" ,
     title: "Samsung A9", scherm: "20", batterij: "45" ,
 ]

【问题讨论】：

【参考方案1】：

Vue cli：

将该数据设置在名为 posts.json 的文件中，然后按如下方式导入：

    import posts from "./posts.json";

并将其分配给 mounted 钩子中的 postList ：

  computed:
  .... 
  ,  
  mounted()
      this.postList=posts

CDN

在您的情况下，您应该使用像 axios 这样的 AJAX api

 computed:
  .... 
  ,  
  mounted()
       axios
           .get('posts.json')
           .then(response => (this.postList = response.data))

你应该包括以下脚本：

    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>

完整示例

var app = new Vue(
  el: '#app',
  data: 
    keyword: '',
    postList: []
  ,
  computed: 
    filteredList() 
      return this.postList.filter((post) => 
        return post.title.toLowerCase().includes(this.keyword.toLowerCase());
      );
    
  ,
  mounted()
    axios.get('https://jsonplaceholder.typicode.com/posts')
        .then((response)=> 
          this.postList=response.data;
        )
  
);
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title></title>
  <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="https://unpkg.com/vue-axios@2.1.4/dist/vue-axios.min.js"></script>
</head>

<body>
  <div id="app">

  

    <div class="wrapper">

      <table style="width:100%; text-align: left;">
        <tr>
          <th style="text-align: left; width: 33%">ID</th>
          <th style="text-align: left; width: 33%">Title</th>
          <th style="text-align: left; width: 33%">Body</th>
        </tr>
      </table>

      <div v-for="post in postList">
        <table style="width:100%; text-align: left">
          <tr style="text-align: left;">
            <td style="text-align: left; width: 33%"> post.id </td>
            <td style="text-align: left; width: 33%"> post.title</td>
            <td style="text-align: left; width: 33%"> post.body </td>
          </tr>
        </table>
      </div>

    </div>
    </div>
</body>

【讨论】：

以上是关于从 Vue.js 中的 JSON 文件导入数据而不是手动数据的主要内容，如果未能解决你的问题，请参考以下文章