[英]Why my page can get the Vue.js 2 data attributes but it is not reactive?
我有一个 Laravel Vue.js 2.0 项目,我不知道为什么会得到结果,但是当我尝试将 v-model 用于输入字段时。 它不是反应性的,或者页面内的所有内容都不是反应性的。 Welcome.js 有el
,它链接到 #app id,位于 app.blade.php 中。
我还尝试检查 chrome devtools > Vue > Root > 无显示。 它说这个实例没有反应状态。
这是我的刀片文件:
应用程序.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
欢迎.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;
}
}
});
我发现了这个问题的主要原因。
在我的 app.js 中,还有一个 vue,其中 el 链接到 #app。 所以也许,这里有一些反应性问题或 vue 问题。
所以当我试图删除这部分时,我解决了我的问题。
这是我的 app.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.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.