Почему моя страница может получить атрибуты данных Vue. js 2, но она не реагирует? - PullRequest
Новая
       0

Почему моя страница может получить атрибуты данных Vue. js 2, но она не реагирует?

0 голосов
/ 27 февраля 2020

У меня есть проект Laravel Vue. js 2.0, и я не знаю, почему я получаю результат, но когда я пытался использовать v-модель для поля ввода. это не реагирует или, возможно, все внутри страницы не реагирует. Приветствие. js имеет el, которое связано с #app id, где находится в app.blade. php.

Я также пытался проверить, что в chrome devtools> Vue> Root> ничего не отображается. Он говорит, что этот экземпляр не имеет реактивного состояния.

enter image description here

Вот мои блейд-файлы:

app.blade. php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
@if (isset($background))
    <body style="background: url( {{ $background }});">
@else
    <body>
@endif
    <div id="app">
        @yield('navbar')

        <main class="py-4">
            @yield('content')
        </main>
    </div>

    @yield('script')
</body>
</html>

добро пожаловать. blade. php

@extends('layouts.app', ['background' => asset('img/pattern.svg')])

@extends('components.navbar-customer')

@php
    $steps = [
        [
            'id' => 1,
            'name' => 'PRE-PLANNING',
            'color' => 'violet'
        ],
        [
            'id' => 2,
            'name' => 'PLAN YOUR MAP',
            'color' => 'gold'
        ],
        [
            'id' => 3,
            'name' => 'PLAN YOUR READING',
            'color' => 'blue'
        ],
        [
            'id' => 4,
            'name' => 'PEN TO PAPER',
            'color' => 'pink'
        ],
        [
            'id' => 5,
            'name' => 'PRUNE IT BACK',
            'color' => 'green'
        ],
        [
            'id' => 6,
            'name' => 'PAUSE TO PROCESS',
            'color' => 'indigo'
        ],
        [
            'id' => 7,
            'name' => 'POLISH IT UP',
            'color' => 'peach'
        ]
    ];
@endphp

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-12">
            <div class="section section-card p-5 blue">
                <div class="full-width">
                    <div class="header text-black text-center font-weight-bold orange p-1">
                    <label class="header-text">Assignment Calculator</label>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6 col-md-12 mt-4">
                        <table class="full-width">
                            <thead>
                                <tr>
                                    <th class="yellow" scope="col" colspan="2">Assignment #1</th>
                                    <th class="peach" scope="col" colspan="1">Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="green">Start Date</td>
                                    <td class="white">

                                    </td>
                                    <td class="light-peach">14</td>
                                </tr>
                                <tr>
                                    <td class="green">End Date</td>
                                    <td class="white">

                                    </td>
                                    <td class="light-peach">@{{ getTotalDays  }} Days</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="pt-3 pb-3 white">
                            <input type="text" v-model="assignment.one.start">
                            <input type="text" v-model="assignment.one.end">
                        </div>
                        <table class="full-width">
                            <thead>
                                <tr>
                                    <th class="yellow" scope="col" colspan="2">Assignment #2</th>
                                    <th class="peach" scope="col" colspan="1">Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="green">Start Date</td>
                                    <td class="white">04/05/2020</td>
                                    <td class="light-peach">14</td>
                                </tr>
                                <tr>
                                    <td class="green">End Date</td>
                                    <td class="white">18/05/2020</td>
                                    <td class="light-peach">Days</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <div class="col-lg-6 col-md-12 mt-4">
                        <table class="full-width">
                            <thead>
                                <tr>
                                    <th class="yellow" scope="col" colspan="2">Assignment #1</th>
                                    <th class="peach" scope="col" colspan="1">Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="green">Start Date</td>
                                    <td class="white">04/05/2020</td>
                                    <td class="light-peach">14</td>
                                </tr>
                                <tr>
                                    <td class="green">End Date</td>
                                    <td class="white">18/05/2020</td>
                                    <td class="light-peach">Days</td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="pt-3 pb-3 white"></div>
                        <table class="full-width">
                            <thead>
                                <tr>
                                    <th class="yellow" scope="col" colspan="2">Assignment #2</th>
                                    <th class="peach" scope="col" colspan="1">Time</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="green">Start Date</td>
                                    <td class="white">04/05/2020</td>
                                    <td class="light-peach">14</td>
                                </tr>
                                <tr>
                                    <td class="green">End Date</td>
                                    <td class="white">18/05/2020</td>
                                    <td class="light-peach">Days</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="section section-card p-5 orange mt-4">
                <div class="full-width">
                    <div class="header text-black text-center font-weight-bold blue p-1">
                        <label class="header-text">Assignment Calculator</label>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12 col-md-12 mt-4">
                        @foreach ($steps as $step)
                            <table class="full-width">
                                <tbody>
                                    <tr>
                                        <td class="{{ $step['color'] }}-pure w-10-p text-white" rowspan="4">
                                            <label class="vertical-text text-center">STEP {{ $step['id']}}</label>
                                        </td>
                                        <td class="{{ $step['color'] }}-light p-2">Resources</td>
                                        <td class="{{ $step['color'] }}-light p-2">Notes</td>
                                    </tr>
                                    <tr>
                                        <td class="white"></td>
                                        <td class="white"></td>
                                    </tr>
                                    <tr>
                                        <td class="white"></td>
                                        <td class="white"></td>
                                    </tr>
                                    <tr>
                                        <td class="white"></td>
                                        <td class="white"></td>
                                    </tr>
                                </tbody>
                            </table>
                        @endforeach
                    </div>
                </div>
            </div>

            <div class="footer section section-card mt-4 p-5"> 
                <label class="font-weight-bolder text-center full-width">
                    @2020 Dr Irene Dudley-Swarbrick, Al Rights Reserved
                </label>
            </div>
        </div>

        <div class="col-lg-4 col-md-12" id="right">
            <div class="section section-card p-5 orange">
                @foreach ($steps as $step)
                    <table class="full-width">
                        <thead>
                            <tr>
                                <th class="{{ $step['color'] }}-pure text-white" scope="col" colspan="1">Step {{ $step['id'] }}</th>
                                <th class="{{ $step['color'] }}-light" scope="col" colspan="2">{{ $step['name'] }}</th>
                            </tr>
                        </thead>
                    </table>
                    <table class="full-width">
                        <thead>
                            <tr>
                                <th class="green font-weight-bold">ASSIGNMENTS</th>
                                <th class="green font-weight-bold">COMPLETION DATES</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="dirty-green">Module #1</td>
                                <td class="dirty-green">04/05/2020</td>
                            </tr>
                            <tr>
                                <td class="dirty-gray">Module #2</td>
                                <td class="dirty-gray">04/05/2020</td>
                            </tr>
                            <tr>
                                <td class="dirty-green">Module #3</td>
                                <td class="dirty-green">04/05/2020</td>
                            </tr>
                            <tr>
                                <td class="dirty-gray">Module #4</td>
                                <td class="dirty-gray">04/05/2020</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="pt-3 pb-3 white"></div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
    <script src="{{ asset('js/welcome.js') }}"></script>
@endsection

, как вы можете видеть в welcome.blade. php, я пытался использовать v-модель, но она не реагировала, когда я пытался редактировать поле ввода. А также в поле ввода. Кроме того, после загрузки страницы в поле ввода нет значения.

Вывод

enter image description here

welcome. js 

window.Vue = require('vue');

let app = new Vue({
    el: '#app',

    data() {
        return {
            assignment: {
                one: {
                    start: 2,
                    end: 6
                }
            }
        }
    },

    computed: {
        getTotalDays() {
            let number = 'one';
            return this.assignment[number].start - this.assignment[number].end;
        }
    }
});

Ответы [ 2 ]

0 голосов
/ 28 февраля 2020

Я выяснил, в чем основная причина этой проблемы.

В моем приложении. js, там также есть vue, где его el связан с #app. Так что, может быть, здесь есть проблема с реактивностью или vue.

Поэтому, когда я попытался удалить эту часть, я решил свою проблему.

Вот мое приложение. js

/**
 * 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');

/**
 * 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',
});

 ^ // So removing that part solved my problem.
0 голосов
/ 27 февраля 2020

Итак, я фактически продублировал ваши файлы выше, и это работает для меня. Вы видите какие-либо ошибки в консоли Javascript?

Вот что я вижу с вашим кодом (нет CSS, так как вы его не предоставили):

enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...