axios 未在 Vue js 2 中定義

Question

強文本我是 laravel 和 vue js 的新手。 我正在嘗試學習 Vue js。在 Laravel+Vue 項目中，我嘗試使用 axios 發布 API 響應。 axios 未在 Vue js 2 中定義。如何解決這個問題。當我添加一些數據時。 數據沒有顯示，我的刪除 function 也沒有工作。 為什么我會遇到這個問題？ 感謝提前

應用程序.js

import Vue from 'vue';

import App from './vue/app';



import { library } from '@fortawesome/fontawesome-svg-core'
import { faPlusSquare, faTrash } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

library.add(faPlusSquare, faTrash)

Vue.component('font-awesome-icon', FontAwesomeIcon)


const app = new Vue ({
    el: '#app',
    components: { App }
});

addItemForm

<template>
  <div class="addItem">
    <input type="text" v-model="item.name" />
    <font-awesome-icon
      icon="plus-square"
      @click="addItem()"
      :class="[item.name ? 'active' : 'inactive', 'plus']"
    />
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      item: {
        name: "",
      },
    };
  },
  methods: {
    addItem() {
      if (this.item.name == "") {
        return;
      }
      axios
        .post("api/item/store", {
          item: this.item,
        })
        .then((response) => {
          if (response.status == 201) {
            this.item.name = "";
            this.$emit("reloadlist");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.addItem {
  display: flex;
  justify-content: center;
  align-content: center;
}

input {
  background: rgb(236, 164, 138);
  border: 0px;
  outline: none;
  padding: 5px;
  margin-right: 10px;
  width: 100%;
}
.plus {
  font-size: 20px;
}

.active {
  color: rgb(34, 211, 57);
}

.inactive {
  color: rgb(63, 66, 63);
}
</style>

應用程序.vue

<template>

  <div class="todoListContainer">
    <div class="heading">
      <h2 id="title">Todo List</h2>
      <add-item-form v-on:reloadlist="getList()" />
    </div>
    <list-view :items="items"
    v-on:reloadlist="getList()" />
  </div>
</template>

<script>

import addItemForm from "./addItemForm.vue";
import listView from "./listView.vue";

export default {
  components: {
    addItemForm,
    listView,
  },
  data: function () {
    return {
      items: [],
    };
  },
  methods: {
    getList() {
      axios
        .post('api/items')
        .then((response) => {
          this.items = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped>
.todoListContainer {
  width: 350px;
  margin: auto;
}

.heading {
  background: wheat;
  padding: 10px;
}
#title {
  text-align: center;
}
</style>

Answer 1

為了使用axios ，您必須導入 axios。 考慮到您已經在項目中安裝了axios ，因為它是第三方庫。

import axios from 'axios';

在組件中添加以上行，無論您使用 package。

Answer 2

首先安裝 axios 和 vue-axios 包。

npm install axios vue-axios

然后在 app.js 文件中寫下這段代碼：

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

// this is the default base url in laravel
axios.defaults.baseURL = 'http://127.0.0.1:8000';

// this line is written to avoid csrf error
window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest',
    'X-CSRF-TOKEN' : document.querySelector('meta[name="csrf-token"]').getAttribute('content')
};

然后，當您想使用 axios 時，只需編寫this.axios 。

Answer 3

首先，安裝 axios 和 vue-axios

npm install axios vue-axios

其次，將其導入您的script中

<script>

import addItemForm from "./addItemForm.vue";
import listView from "./listView.vue";

import axios from 'axios';  // <-- add this line

export default {
  components: {
    addItemForm,
    listView,
  },
  data: function () {
    return {
      items: [],
    };
  },
  methods: {
    getList() {
      axios
        .post('api/items')
        .then((response) => {
          this.items = response.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
  created() {
    this.getList();
  },
};
</script>

Answer 4

您好，您必須先安裝 Axios

npm install axios vue-axios