Why my page can get the Vue.js 2 data attributes but it is not reactive?
Question
I have a Laravel Vue.js 2.0 Project and I don't know why I'm getting the result but when I tried to use v-model to an input field. it is not reactive or maybe all inside the page is not reactive. The welcome.js has el which is linked to #app id where in located in app.blade.php.
I tried to check also in chrome devtools > Vue > Root > nothing display. It says this instance has no reactive state.
Here's my blade files:
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
as you can see in welcome.blade.php, I tried to use v-model but it is not reactive when I tried to edit the input field. And also in the input field. And also, once the page is loaded, there's no value in the input field.
Output
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 answers
solution1
0 2020-02-27 20:28:30
So, I actually duplicated your files above and it is working for me. Are you seeing any errors in the Javascript console?
Here is what I am seeing with your code (no CSS since you didn't provide any):
solution2
0 ACCPTED 2020-02-28 02:15:32
I found out what the main cause of this problem.
In my app.js, there's also a vue there wherein it's el is linked to #app. So maybe, there's something reactivity issue or vue issue here.
So when I tried to remove this part, I solved my problem.
Here's my 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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to get data attributes in vue.js
Declare reactive data properties in vue.js?
Vue.js form not reactive
How can I get Vue.js to be reactive for changes to dynamically added array properties?
Vue.js: Data is not reactive and not correctly updated within a method
why vue.js computed get undefined
Why vue.js not set data?
How to get Data correctly in Vue.js
Get data from mixin Vue.js
Vue.js: How to get attributes of an option in Select dropdown box?
Related Tags