为什么我的页面可以获取Vue.js 2数据属性，但它不是被动的？
问题描述 投票：0回答：1
我有一个Laravel Vue.js 2.0项目，但我不知道为什么得到结果，但是当我尝试对输入字段使用v-model时。它不是无反应的，或者页面内的所有内容都不是无反应的。 welcome.js的el链接到位于app.blade.php中的#app id。
我也尝试在chrome devtools中检查> Vue> Root>没有显示。它说此实例没有反应状态。
这是我的刀片文件：
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>
welcome.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，但是当我尝试编辑输入字段时，它不是被动的。并且也在输入字段中。而且，一旦页面加载完毕，输入字段中就没有值。
输出
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;
}
}
});
1个回答
0
投票
投票
这是我在您的代码中看到的内容（因为您未提供任何CSS，所以没有CSS：]
最新问题
- 在 Angular 10 中显示 ng-content 两次
- 在一个查询中插入多个表
- 在 Mac 上安装 Chatterbot 时出错
- 无法从 setuptools 导入名称“setuptools”
- 更改样式表内由 data-URL 加载的 SVG 图像的填充颜色
- 将角度信号值设置为 HTML 选择选项
- 使用 Entity Framework Core 提前加载相关对象
- Python：从一条二维线中减去另一条线
- 如何使用 Rspec 测试是否调用了 Rails 6 的 `discard_on`？
- 如何以编程方式打开/关闭计时器
- Neo4j - 在服务器上重新启动服务后，找不到图
- 如何阻止 EF 尝试更新 SQL Server 的计算列？
- 比较两个文件中的两个 Excel 工作表
- 如何识别 Pandas 数据框中的字符串
- 如何从数组内部打印一个对象以获取文档列表？
- 在 python 中验证 StoreKit 2 事务 jwsRepresentation 的正确方法是什么？
- 带有元组的 Swift 结构不符合 Codable
- ChatConsumer() 缺少 2 个必需的位置参数：“接收”和“发送”，有什么错误？
- 如何使用 newtonsoft json 序列化我的对象并给出整个结构？
- Flutter，通过选择轮选择 int 和 double 值并将它们从一页解析到另一页
© www.soinside.com 2019 - 2024. All rights reserved.