Question

我对在laravel中使用vue.js很陌生，因此我在这里实现的是非常基本的东西，这应该是带有步骤的向导。当我打开页面时，我一直在获取“步骤”未定义的信息。我尝试使用Google搜索，但找不到任何可能的解决方案。任何帮助都会很棒。

<div class="container  u-space-2-top" id="content">
    <div class="row justify-content-md-between align-items-md-center mb-7">
        <div class="col-md-12 mb-7 mb-md-0" v-if="step === 1">
            <h1 class="h3 font-weight-bold">STEP 1</h1>
            <div class="float-right">
                        <a href="javascript:;" 
                           @click.prevent="next()">
                            Next &raquo;
                          </a>
             </div>
        </div>
        <div class="col-md-12 mb-7 mb-md-0" v-if="this.step === 2">
            <div class="card">
                <div class="card-header">
                    <h5>STEP 2</h5>
                </div>
            </div>
        </div>
    </div>
</div>

window.Vue = require('vue');
const app = new Vue({
    el: '#content',
    data: function (){
        return {
            step: 1,
            cv: null,
            formErrors: [],
            formSubmitted: false,
            applicant: {
                    first_name: '',
                    last_name: '',
                    email: '',
                    phone: '',
            }
        }
    },
    mounted() {
    },

    methods: {
        prev(){
            this.step--;
        },
        next(){
            this.step++;
        },
        submit(){
            alert("ready to submit");
        }
}

Answer 1

使用laravel时，更简单的设置方法是以下步骤：

对以下内容进行编辑或创建resources/views/welcome.blade.php：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="{{asset('js/app.js') }}" defer></script>
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
    <example-component></example-component>
</div>
</body>
</html>

编辑或创建具有以下内容的resources/js/components/ExampleComponent：

<template>
    <div class="container  u-space-2-top" id="content">
        <div class="row justify-content-md-between align-items-md-center mb-7">
            <div class="col-md-12 mb-7 mb-md-0" v-if="step === 1">
                <h1 class="h3 font-weight-bold">STEP 1</h1>
                <div class="float-right">
                    <a href="javascript:;"
                       @click.prevent="next()">
                        Next &raquo;
                    </a>
                </div>
            </div>
            <div class="col-md-12 mb-7 mb-md-0" v-if="step === 2">
                <div class="card">
                    <div class="card-header">
                        <h5>STEP 2</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        data: function (){
            return {
                step: 1,
                cv: null,
                formErrors: [],
                formSubmitted: false,
                applicant: {
                    first_name: '',
                    last_name: '',
                    email: '',
                    phone: '',
                }
            }
        },
        mounted() {
            console.log('Component mounted.')
        },
        methods: {
            prev(){
                this.step--;
            },
            next(){
                this.step++;
            },
            submit(){
                alert("ready to submit");
            }
        },

    }
</script>

运行以下命令：

npm run watch

如果没有欢迎路线，请执行以下操作：

Route::get('/', function(){
  return view('welcome');
});

Answer 2

尝试将“数据”设置为对象，而不是功能：

data: {
  step: 1,
  cv: null,
  formErrors: [],
  formSubmitted: false,
  applicant: {
    first_name: '',
    last_name: '',
    email: '',
    phone: '',
  }

},

Answer 3

我将您的代码粘贴到了代码段中，并且可以正常工作。这不是答案，但希望能帮上忙。

const app = new Vue({
    el: '#content',
    data: function (){
        return {
            step: 1,
            cv: null,
            formErrors: [],
            formSubmitted: false,
            applicant: {
                    first_name: '',
                    last_name: '',
                    email: '',
                    phone: '',
            }
        }
    },
    mounted() {
    },

    methods: {
        prev(){
            this.step--;
        },
        next(){
            this.step++;
        },
        submit(){
            alert("ready to submit");
        }
}
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="container  u-space-2-top" id="content">
    <div class="row justify-content-md-between align-items-md-center mb-7">
        <div class="col-md-12 mb-7 mb-md-0" v-if="step === 1">
            <h1 class="h3 font-weight-bold">STEP 1</h1>
            <div class="float-right">
                        <a href="javascript:;" 
                           @click.prevent="next()">
                            Next &raquo;
                          </a>
             </div>
        </div>
        <div class="col-md-12 mb-7 mb-md-0" v-if="this.step === 2">
            <div class="card">
                <div class="card-header">
                    <h5>STEP 2</h5>
                </div>
            </div>
        </div>
    </div>
</div>

找不到Vue属性

3 个答案: