從Vue.js中的一個JSON文件導入數據，而不是手動數據

Question

這是我第一次使用 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" },
 ]

Answer 1

Vue cli :

將該數據設置在名為posts.json的文件中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>

Answer 2

要使用 Vue 2 導入動態文件路徑，您可以在created或watch等方法中使用import方法：

import Vue from "vue";

export default Vue.extend({
  data() {
    return {
      dynamicPath: "my-path",
      importResult: null,
    };
  },
  created() {
    import(`@/${this.dynamicPath}/my-file.json`).then((module) => {
      this.importResult = module.default;
    });
  },
}

從Vue.js中的一個JSON文件導入數據，而不是手動數據

問題描述

2 個解決方案

解決方案1
5 已采納 2018-11-05 10:05:36

解決方案2
1 2022-03-16 16:54:39

從Vue.js中的一個JSON文件導入數據，而不是手動數據

問題描述

2 個解決方案

解決方案1 5 已采納 2018-11-05 10:05:36

解決方案2 1 2022-03-16 16:54:39

解決方案1
5 已采納 2018-11-05 10:05:36

解決方案2
1 2022-03-16 16:54:39