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的文件中，并按如下所示进行导入：

    import posts from "./posts.json";

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

  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文件代替人工数据

1 个答案: