vue.js не отображается в браузере - PullRequest
Новая
       12

vue.js не отображается в браузере

0 голосов
/ 23 июня 2018

  1. Код файла TaskList.vue Ресурсы / 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>
    Ошибка описывается в числе, как 1,2, ее другая ошибка

    1)

    [Vue warn]: свойство или метод "task" не определены вэкземпляр, на который ссылаются во время рендеринга.Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.См .: 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/web.php

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

    return Task::latest()->pluck('body');
});
Route::get('/tasks', function () {
    Task::ForceCreate(request(['body']));
});

Ответы [ 3 ]

0 голосов
/ 23 июня 2018

Вы пропустили - здесь, поэтому task не определено для v-text="task"

  <li v for="task in tasks"

Использовать как подсказывает документ 

    <ul>
        <li v-for="task in tasks" v-text="task"></li>
    </ul>
0 голосов
/ 23 июня 2018

Вы можете использовать следующую команду для кодирования 

   // 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>
0 голосов
/ 23 июня 2018

Я думаю, что проблема в этой строке 

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

Vue утверждает, что если вы используете this, не используйте функцию стрелок, потому что this потеряно в области видимости. так что попробуй 

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

и посмотрите, устранена ли ошибка

...