Question

我使用git bash创建了回送应用程序。我正在使用vue js进行前端开发。当我在localhost中运行应用程序并尝试访问html页面时。我在Google Chrome控制台窗口中遇到以下错误。

server.js：1无法加载资源：服务器以404（未找到）状态响应 vue.js：634 [Vue警告]：找不到元素：#catApp

这是代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">

  <script src="./server.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  <script>

    const API = 'http://localhost:3000/api/Cat/';

    let catApp = new Vue({
      el: '#catApp',
      data: {
        cats: [],
        cat: {
          id: '',
          name: '',
          age: '',
          gender: '',
          breed: ''
        }
      },
      created: function () {
        this.getCats();
      },
      methods: {
        getCats: function () {
          fetch(API)
            .then(res => res.json())
            .then(res => this.cats = res);
        },
        storeCat: function () {
          let method;
          console.log('storeCat', this.cat);
          // Handle new vs old
          if (this.cat.id === '') {
            delete this.cat.id;
            method = 'POST';
          } else {
            method = 'PUT';
          }
          fetch(API, {
            headers: {
              'Content-Type': 'application/json'
            },
            method: method,
            body: JSON.stringify(this.cat)
          })
            .then(res => res.json())
            .then(res => {
              this.getCats();
              this.reset();
            });
        },
        deleteCat: function (c) {
          fetch(API + c.id, {
            headers: {
              'Content-Type': 'application/json'
            },
            method: 'DELETE'
          })
            .then(res => res.json())
            .then(res => {
              this.getCats();
            });

          // call reset cuz the cat could be 'active'
          this.reset();
        },
        editCat: function (c) {
          /*
          This line was bad as it made a reference, and as you typed, it updated
          the list. A user may think they don't need to click save.
          this.cat = c;
          */
          this.cat.id = c.id;
          this.cat.name = c.name;
          this.cat.age = c.age;
          this.cat.breed = c.breed;
          this.cat.gender = c.gender;
        },
        reset: function () {
          this.cat.id = '';
          this.cat.name = '';
          this.cat.age = '';
          this.cat.breed = '';
          this.cat.gender = '';
        }
      }
    });
  </script>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>

  <div id="catApp" v-cloak>

    <h1>Cats</h1>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
          <th>Gender</th>
          <th>Breed</th>
          <td>&nbsp;</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="cat in cats">
          <td @click="editCat(cat)" class="catItem" title="Click to Edit">{{cat.name}}</td>
          <td>{{cat.age}}</td>
          <td>{{cat.gender}}</td>
          <td>{{cat.breed}}</td>
          <td @click="deleteCat(cat)" class="deleteCat" title="Click to Delete">Delete</td>
        </tr>
      </tbody>
    </table>

    <form @submit.prevent="storeCat">
      <p>
        <label for="name">Name</label>
        <input type="text" id="name" v-model="cat.name">
      </p>
      <p>
        <label for="age">Age</label>
        <input type="number" id="age" v-model="cat.age">
      </p>
      <p>
        <label for="breed">Breed</label>
        <input type="text" id="breed" v-model="cat.breed">
      </p>
      <p>
        <label for="gender">Gender</label>
        <input type="text" id="gender" v-model="cat.gender">
      </p>
      <input type="reset" value="Clear" @click="reset">
      <input type="submit" value="Save Cat ?">
    </form>
  </div>


</body>
</html>

这是我运行应用程序时的屏幕截图。

Answer 1

还将所有脚本标记放在

之前

删除

<style>
    [v-cloak] {
      display: none;
    }
</style>

并移除隐形斗篷

  <div id="catApp" >

Vue js应用程序引发错误（找不到ID）

1 个答案: