Vuejs Ошибки просмотра компонентов - PullRequest
Новая
       10

Vuejs Ошибки просмотра компонентов

0 голосов
/ 06 апреля 2020

У меня есть этот код для компонента, но он не работает. Это дает мне пустую страницу, когда я просматриваю ее на локальном хосте, и я пробовал ее с обоих портов 3000 и 8000. Она выдает мне ту же ошибку, данные не отображаются. 

<template>
<form>
    <a @click="addCategory" class="add">+ Add Category</a>
        <div v-for="(category, index) in categories" :key="category.id">
            <input type="text" v-model="category.name" :ref="category.name">
            <input type="number" v-model="category.display_order">
            <a @click="removeCategory(index)" class="remove">delete</a>
            <div>
                <img v-if="category.image" :src="'/images/${category.image}'" width="100">
                <lable v-else>Image: </lable>
                <input type="text" v-model.lazy="category.image">
            </div>
            <hr>
        </div>
    </form>
</template>

<script>
    export default {
        props: ['initialCategories'],
        data() {
            return {
                categories: _.cloneDeep(this.initialCategories)
            };
        },
        methods: {
            removeCategory(index) {
                if (confirm('Are you sure?')) {
                    this.categories.splice(index, 1);
                }
            },
            addCategory() {
                this.categories.push({
                    id: 0,
                    name: '',
                    image: '',
                    display_order: this.categories.length + 1
                });
                this.nextTick(() => {
                    window.scrollTo(0, document.body.scrollHeight);
                    this.$refs[''][0].focus();
                })
            }
        }
    }
</script>

<style scoped>
    hr {
        margin-bottom: 30px;
    }
    img {
        vertical-align: middle;
    }
</style>

и это приложение. js file 

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)))

Vue.component('category-manager', require('./components/CategoryManager.vue'));

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

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

это страница просмотра для него 

@extends('layouts.app')

@section('title', ' - Categories')

@section('content')
    <h1>Categories</h1>
    <category-manager :initial-categories="{{ $categories }}"></category-manager>
@endsection

, и оно выглядит так enter image description here

** кстати, я использую Larvel 7.4 и vuejs3

...