javascript - 为什么我的页面可以获取 Vue.js 2 数据属性但它不是响应式的?
问题描述
我有一个 Laravel Vue.js 2.0 项目,但我不知道为什么会得到结果,但是当我尝试将 v-model 用于输入字段时。它不是反应性的,或者页面内的所有内容都不是反应性的。el
Welcome.js 链接到位于 app.blade.php 中的#app id 。
我也尝试检查 chrome devtools > Vue > Root > nothing display。它说这个实例没有反应状态。
这是我的刀片文件:
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-model,但是当我尝试编辑输入字段时它没有反应。并且还在输入字段中。而且,一旦页面被加载,输入字段中就没有值了。
输出
欢迎.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;
}
}
});
解决方案
推荐阅读
- mongodb - 如何在 MongoDB 聚合中同时使用 $group 和 $cond?
- javascript - 未捕获的参考错误:未定义马赛克
- apache-camel - Apache Camel 是否为 3 个服务器节点中的 configure() 内部的多个 from() 创建多个线程?
- swift - Mac 键盘数字小键盘上 Enter 键的 UIKeyCommand
- mysql - 您如何找到重叠最高或最低的时期
- mysql - 我最好使用两个查询中的哪一个来提高性能?
- ios - 当我通过 IOS 中的 UIActivityViewController 共享 PDF base64 字符串时如何重命名文件名
- python - 布尔输出不一致
- r - 从多个现有变量创建新的日期变量
- string - 切片显示在列表中的行和列