Modifications to Vue do not work

Question

Modifications to Vue do not work

Navigation

#1 by (2 votes)
#2 by (2 votes)

-1

The .vue files that are in the resources/assets/js/components box are the system components. It happens to me that when I edit any of those components, no modification appears in the view.

file: resources/assets/js/app.js

require('./bootstrap');

import VueResource from 'vue-resource'
import Vodal from 'vodal';
import "vodal/common.css";
import "vodal/door.css";

// chartjs package
import "chart.js/dist/Chart.bundle.js"
// vue-charts package
require('hchs-vue-charts');
require('vue2-dropzone');
Vue.use(VueCharts);

Vue.use(VueResource);

Vue.http.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;

/**
 * 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.
 */


Vue.component(Vodal.name, Vodal);
Vue.component('grid', require('./components/Grid.vue'));
Vue.component('location_grid', require('./components/ProductLocation.vue'));
Vue.component('date', require('./components/datepicker.vue'));
Vue.component('prod', require('./components/Select2Prod.vue'));
Vue.component('locs_list', require('./components/Select2Locs.vue'));
Vue.component('select2', require('./components/Select2.vue'));
Vue.component('item', require('./components/TRComponent.vue'));
Vue.component('item-location', require('./components/TRLocationComponent.vue'));
Vue.component('vtable', require('./components/Table.vue'));
Vue.component('upload', require('./components/ProductUpload.vue'));
Vue.component('avatarupload', require('./components/AvatarUpload.vue'));

file: views/users/view_users.blade.pbp

@extends('layouts.master')
@section('report')

@endsection
@section('title')
    {!! env('COMPANY_NAME') !!} | @lang('user.Users')
@endsection

@section('heading')
    @lang('user.Users')
@endsection

@section('content')
    <div id="app">
        <vtable url="user/items/filter" :columns="columns" :filters="filters"></vtable>
    </div>

@endsection

@section('jquery')
    <script>
        new Vue({
            el: '#app',
            data: {
                columns: [

                    {
                        "name": "name",
                        "title": "User",
                        "sortField": "name",
                        "visible": true
                    }, {
                        "name": "email",
                        "title": "Email",
                        "sortField": "Email",
                        "visible": true
                    }, {
                        "name": "department.name",
                        "title": "Department",
                        "sortField": "department",
                        "visible": true
                    },

                    {
                        name: '__component:custom-actions',
                        title: 'Actions',
                        titleClass: 'text-center',
                        dataClass: 'text-center'
                    }
                ],
                filters: [

                ]

            },
            methods: {}
        });
    </script>
@endsection

Everything that I modified in './components/Table.vue' , there is no effect

javascript php laravel laravel-blade vue.js

asked by Franklin'j Gil'z 28.08.2017 в 17:13

source

2 answers

2

instead of using the script in the view, it incorporates the following at the end of app.js

const app = new Vue({
    el: '#app'
});

and send the data from the controller

$columns = [];
$filters = [];
return view('users.view_users')->with('columns',$columns)->with('filters',$filters);

In the view you should not add the script tag

answered by 28.08.2017 в 19:45

I'm doing a php system and I miss this code problem in pl / sql how to count the number of records in a [closed] table

score 2 · Accepted Answer

In order for the changes to take effect, you must:
1- Execute in console npm install to install packages package.json
2- Then you have to execute npm run , npm run dev or npm run watch (the latter is useful when you are modifying the components and testing them immediately)