axios未在Vuejs2中定義

強文本 我是 laravel 和 vue js 的新手。我正在嘗試學習 Vue js。在 Laravel Vue 專案中，我嘗試使用 axios 發布 API 回應。axios 在 Vue js 2 中沒有定義。如何解決這個問題。當我添加一些資料時。資料沒有顯示，也沒有作業我的洗掉功能。為什么我會遇到這個問題？感謝提前

應用程式.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 }
});

添加專案表單

<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>

uj5u.com熱心網友回復：

為了使用，axios你必須匯入 axios。考慮到您axios已經在您的專案中安裝了它，因為它是第三方庫。

import axios from 'axios';

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

uj5u.com熱心網友回復：

首先安裝 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.

uj5u.com熱心網友回復：

首先安裝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>

標籤：javascript 拉拉维尔 Vue.js

上一篇：如何使標簽內的錨鏈接不可點擊或禁用？

下一篇：在Javascript中洗掉二維陣列中相同元素的陣列