Ошибка при переходе?

Question

[Greeg Zagrelov]

Добрый день, что за ошибка? при переходе на другую страницу?

а при отправки выбивает такую ошибку

Только учусь , подкиньте мысль в чём проблема ?

Comments

[Михаил]

ошибка в том, что api is not defined

???

Answer 1

[Crazy Citizen]

Приветствую, по тексту ошибки видно что переменной api не существует, хотелось бы посмотреть код, чтобы иметь возможность подсказать вам

Comments

[Greeg Zagrelov]

import 'es6-promise/auto'
import axios from 'axios'
import './bootstrap'
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueAuth from '@websanova/vue-auth'
import VueAxios from 'vue-axios'
import VueRouter from 'vue-router'
import Index from './Index.vue'
import auth from './auth'
import router from './router'
window.Vue = require('vue');
import store from './index.js';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);


Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('create-post', require('./components/CreatePost.vue').default);
Vue.component('all-posts', require('./components/AllPosts.vue').default);

// Set Vue globallygetAllPosts
window.Vue = Vue

// Set Vue router
Vue.router = router
Vue.use(VueRouter)
Vue.use(Vuetify)

// Set Vue authentication
Vue.use(VueAxios, axios)
axios.defaults.baseURL = `${process.env.MIX_APP_URL}/api`
Vue.use(VueAuth, auth)

// Load Index
Vue.component('index', Index)
const app = new Vue({
    el: '#app',
    router,
    store,
    vuetify: new Vuetify(),
});
const VueUploadComponent = require('vue-upload-component')
Vue.component('file-upload', VueUploadComponent)

Route::get('/', function () {
    return view('welcome');
});

// Route to handle page reload in Vue except for api routes
Route::get('/{any?}', function (){
    return view('welcome');
})->where('any', '^(?!api\/)[\/\w\.-]*');

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::group(['middleware' => 'auth', 'prefix' => 'post'], function () {
    Route::get('get_all', 'PostController@getAllPosts')->name('fetch_all');
    Route::post('create_post', 'PostController@createPost')->name('create_post');
});

Route::get('/home', 'HomeController@index')->name('home');

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

// const debug = process.env.NODE_ENV !== 'production';

export default new Vuex.Store({
    state: {
        posts: [],
    },

    actions: {
        async getAllPosts({ commit }) {
            return commit('setPosts', await api.get('/post/get_all'))
        },
    },

    mutations: {
        setPosts(state, response) {
            state.posts = response.data.data;
        },
    },
    // strict: debug
});

[Greeg Zagrelov]

<template>
  <div class="row">
    <div class="col-md-6" v-for="(post, i) in posts" :key=i>
      <div class="card mt-4">
        <img v-if="post.post_images.length" class="card-img-top" :src="post.post_images[0].post_image_path">
        <div class="card-body">
          <p class="card-text"><strong>{{ post.title }}</strong> <br>
            {{ truncateText(post.body) }}
          </p>
        </div>
        <button class="btn btn-success m-2" @click="viewPost(i)">View Post</button>
      </div>
    </div>
    <el-dialog v-if="currentPost" :visible.sync="postDialogVisible" width="40%">
      <span>
        <h3>{{ currentPost.title }}</h3>
        <div class="row">
          <div class="col-md-6" v-for="(img, i) in currentPost.post_images" :key=i>
            <img :src="img.post_image_path" class="img-thumbnail" alt="">
          </div>
        </div>
        <hr>
        <p>{{ currentPost.body }}</p>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="postDialogVisible = false">Okay</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  name: 'all-posts',
  data() {
    return {
      postDialogVisible: false,
      currentPost: '',
    };
  },
  computed: {
    ...mapState(['posts'])
  },
  beforeMount() {
    this.$store.dispatch('getAllPosts');
  },
  methods: {
    truncateText(text) {
      if (text.length > 24) {
        return `${text.substr(0, 24)}...`;
      }
      return text;
    },
    viewPost(postIndex) {
      const post = this.posts[postIndex];
      this.currentPost = post;
      this.postDialogVisible = true;
    }
  },
}
</script>
<code lang="javascript">
<template>
    <div class="card mt-4">
        <div class="card-header">New Post</div>
        <div class="card-body">
            <div
                    v-if="status_msg"
                    :class="{ 'alert-success': status, 'alert-danger': !status }"
                    class="alert"
                    role="alert"
            >{{ status_msg }}</div>
            <form>
                <div class="form-group">
                    <label for="exampleFormControlInput1">Title</label>
                    <input
                            v-model="title"
                            type="text"
                            class="form-control"
                            id="title"
                            placeholder="Post Title"
                            required
                    />
                </div>
                <div class="form-group">
                    <label for="exampleFormControlTextarea1">Post Content</label>
                    <textarea v-model="body" class="form-control" id="post-content" rows="3" required></textarea>
                </div>
                <div class>
                    <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-change="updateImageList"
                            :auto-upload="false"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt />
                    </el-dialog>
                </div>
            </form>
        </div>
        <div class="card-footer">
            <button
                    type="button"
                    @click="createPost"
                    class="btn btn-success"
            >{{ isCreatingPost ? "Posting..." : "Create Post" }}</button>
        </div>
    </div>
</template>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

<script>
    import { setTimeout } from "timers";
    import { mapState, mapActions } from "vuex";

    export default {
        name: "create-post",
        props: ["posts"],
        data() {
            return {
                dialogImageUrl: "",
                dialogVisible: false,
                imageList: [],
                status_msg: "",
                status: "",
                isCreatingPost: false,
                title: "",
                body: ""
            };
        },
        computed: {},
        mounted() {},
        methods: {
            ...mapActions(["getAllPosts"]), //moved it from computed properties
            updateImageList(file) {
                this.imageList.push(file.raw);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.imageList.push(file);
                this.dialogVisible = true;
            },
            createPost(e) {
                e.preventDefault();
                if (!this.validateForm()) {
                    return false;
                }
                const that = this;
                this.isCreatingPost = true;
                let formData = new FormData();

                formData.append("title", this.title);
                formData.append("body", this.body);

                $.each(this.imageList, function(key, image) {
                    formData.append(`images[${key}]`, image);
                });

                api
                    .post("/post/create_post", formData, {
                        headers: { "Content-Type": "multipart/form-data" }
                    })
                    .then(res => {
                        this.title = this.body = "";
                        this.status = true;
                        this.showNotification("Post Successfully Created"); //fixed spelling mistake
                        this.isCreatingPost = false;
                        this.imageList = [];
                        /*
                         this.getAllPosts() can be used here as well
                         note: "that" has been assigned the value of "this" at the top
                         to avoid context related issues.
                         */
                        that.getAllPosts();
                    });
            },
            validateForm() {
                //no vaildation for images - it is needed
                if (!this.title) {
                    this.status = false;
                    this.showNotification("Post title cannot be empty"); //fixed spelling mistake
                    return false;
                }
                if (!this.body) {
                    this.status = false;
                    this.showNotification("Post body cannot be empty");
                    return false;
                }
                return true;
            },
            showNotification(message) {
                //fixed spelling mistake
                this.status_msg = message;
                setTimeout(() => {
                    this.status_msg = "";
                }, 3000);
            }
        }
    };
</script>

</code>

[Crazy Citizen]

Greeg Zagrelov, попробуйте вместо api.post и api.get - axios.post и axios.get

[Crazy Citizen]

Greeg Zagrelov, this.axios только, вы же VueAxios используете, вот примеры как использовать
Vue.axios.get(api).then((response) => {
console.log(response.data)
})

this.axios.get(api).then((response) => {
console.log(response.data)
})

this.$http.get(api).then((response) => {
console.log(response.data)
})

[Greeg Zagrelov]

Crazy Citizen,
сдвинулся с мёртвой точки,, спасибо)_

[Crazy Citizen]

Greeg Zagrelov, пожалуйста)