为啥我的页面可以获取 Vue.js 2 数据属性但它不是响应式的？
Posted
技术标签:
【中文标题】为啥我的页面可以获取 Vue.js 2 数据属性但它不是响应式的？【英文标题】：Why my page can get the Vue.js 2 data attributes but it is not reactive?为什么我的页面可以获取 Vue.js 2 数据属性但它不是响应式的？ 【发布时间】：2020-06-11 20:27:15 【问题描述】：我有一个 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;
);
【问题讨论】：
请涨涨涨涨 如果您的问题仅解决了我使用 app.js 删除 Vue 的实例化，那可能意味着您可能会遇到其他问题。查看laravel.com/docs/6.x/frontend 并确保正确编译文件。实际上，您仍然需要在 2 个不同的地方使用 Vue，并且您的用户将在 2 个不同的文件中加载 2 次，而不是将 Vue 影响到 window.vue 2 次。这对你来说不是问题吗？ 【参考方案1】：我发现了这个问题的主要原因。
在我的 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.
【讨论】：
【参考方案2】：所以，我实际上复制了您上面的文件，它对我有用。您是否在 Javascript 控制台中看到任何错误？
这是我在您的代码中看到的（没有 CSS，因为您没有提供任何内容）：
【讨论】：
嗨。感谢您的回答。我注意到在我的 app.js 中，还有一个 el:#app。我不知道为什么，但我认为这会导致我的 vue 反应性问题。当我试图删除那部分时，我的问题就解决了。以上是关于为啥我的页面可以获取 Vue.js 2 数据属性但它不是响应式的？的主要内容，如果未能解决你的问题，请参考以下文章
vue.js的实例在页面尾部创建的时候，页面会闪一下怎么解决