vue.js is not showing in browser

2
votes

  1. TaskList.vue file code Resoueces/assets/js/components 

    <template>
    <div>
        <ul>
            <li v-for="task in tasks" v-text="task">
              </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data() {
            return{
                tasks: []
            };
         },

         created(){
            axios.get('/tasks').then(response => (this.tasks = response.data));
         }
    };
</script>

2.App.js file code **Resources/assets/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.
 */

Vue.component('task-list', require('./components/TaskList.vue'));

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

3. welcome.blade.php file code
<body>

            <div id="app">

                <task-list></task-list>
            </div>
</body>
    Error is describe in number like 1,2 its different error

    1)

    [Vue warn]: Property or method "task" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

2)app.js:13797 GET http://localhost/tasks 404 (Not Found)

3) You are running Vue in development mode.
    Make sure to turn on production mode when deploying for production.
    See more tips at https://vuejs.org/guide/deployment.html

4) app.js:13822 Uncaught (in promise) Error: Request failed with status code 404
    at createError (app.js:13822)
    at settle (app.js:35254)
    at XMLHttpRequest.handleLoad (app.js:13696)

Route List: route/web.php

      Route::get('/tasks', function () {

    return Task::latest()->pluck('body');
});
Route::get('/tasks', function () {
    Task::ForceCreate(request(['body']));
});
3
laravellaravel-5vuejs2laravel-5.2vue-component
It says that you did not declare the property or method "task", did you? can we see the code where you declare it and the template where you are using it? – Carlos Salazar
I updated question -@CarlosSalazar – user9888683
It is a app.js 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. */ Vue.component('task-list', require('./components/TaskList.vue')); const app = new Vue({ el: '#app' }); – user9888683
Welcome.blade.php file <body> <div id="app"> <task-list></task-list> </div> </body> </html> <script src="/js/app.js"></script> – user9888683
I voted to close this question as "Too broad" as you are showing 2 problems. Problem 1 is app.js:13797 GET http://localhost/tasks 404 (Not Found) and problem 2 is app.js:36520 [Vue warn]: Property or method "task" is not defined Try reducing your code to a small subset, so every problem gets attention, you don't risk partial answers where the answers basicly address half of your issue, and then you get into trouble with properly selecting an accepted answer – Ferrybig

3 Answers

0
votes

You can see using the following to code

   // no use "v for" error invalid syntax
<li v for="task in tasks" v-text="task">
              </li>
              
// you use code below
<li v-for="task in tasks" v-text="task">
  {{task}}
</li>
 
------------------------------------------------
//see more about in vuejs
<tr v-for="(task,index) in tasks" v-text="task">
    <td>{{task}}</td>
    <td><span v-on:click="edit(index)">Edit</td>
    <td><span v-on:click="delete(index)">delete</td>
</tr>
1
votes

You missed - here, thats why task is undefined for v-text="task"

  <li v for="task in tasks"

Use as doc suggests 

    <ul>
        <li v-for="task in tasks" v-text="task"></li>
    </ul>
-1
votes

I think the problem is in this line

axios.get('/tasks').then(response => (this.tasks = response.data));

Vue states that if you're using this do not use arrows function because the this is lost in the scope. so try

axios.get('/tasks').then(function(response){this.tasks = response.data});

and see if the error is solved