Vue js 在我的 laravel 中不起作用

Question

我正在按照教程形式 DevMarketer 进行操作，但在 Vue commands

时迷路了

不要处理我的代码。我运行 npm run dev 和 npm run watch 生成错误但是，没有任何反应似乎我的代码完全正常工作然后我在我的浏览器上检查 developer tool 然后错误弹出来自 root.

错误信息是：
[Vue warn]: 属性或方法 "password_options" 未在实例上定义，但在渲染期间被引用。通过初始化属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于 class 的组件。参见：https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

这是细分：

warn                        @   app.js:sourcemap:32590
warnNonPresent              @   app.js:sourcemap:33896
has                         @   app.js:sourcemap:33929
(anonymous)                 @   VM8162:2
Vue._render                 @   app.js:sourcemap:36541
updateComponent             @   app.js:sourcemap:34785
get                         @   app.js:sourcemap:35139
Watcher                     @   app.js:sourcemap:35128
mountComponent              @   app.js:sourcemap:34792
Vue.$mount                   @  app.js:sourcemap:40537
Vue.$mount                   @  app.js:sourcemap:42936
Vue._init                   @   app.js:sourcemap:36637
Vue                         @   app.js:sourcemap:36726
(anonymous)                 @   app.js:sourcemap:988
__webpack_require__         @   app.js:sourcemap:20
Object.defineProperty.value @   app.js:sourcemap:969
__webpack_require__         @   app.js:sourcemap:20
(anonymous)                 @   app.js:sourcemap:63
(anonymous)                 @   app.js:sourcemap:66

开发工具vue错误：

[Vue warn]: Error compiling template:

<div class="management-area" id="app" style="position: absolute;top: 4rem;left: 200px;right: 0;">
        <div class="flex-container">
    <div class="columns m-t-10">
        <div class="column">
            <h1 class="title">Edit User</h1>
        </div>
    </div>
    <div class="columns">
        <div class="column">
            <h1 class="m-t-0"></h1>
            <form action="http://localhost/cnb/public/manage/users/3" method="POST">
            <input type="hidden" name="_method" value="PUT">
            <input type="hidden" name="_token" value="poLNMotZhSoaEG7NH4WJZPoQKTAsGGy47462aM9J">
                <div class="field">
                    <label for="name" class="label">Name</label>
                    <p class="control">
                        <input type="text" class="input" name="name" id="name" value="User">
                    </p>
                </div>
                <div class="field">
                    <label for="email" class="label">Email</label>
                    <p class="control">
                        <input type="email" class="input" name="email" id="email" value="user@app.com">
                    </p>
                </div>
                <div class="field">
                    <label for="password" class="label">Password</label>
                    <b-radio-grou>
                    <div class="field" v-model="password_options">
                        <b-radio value="keep">Do Not Change Password</b-radio>
                    </div>
                    <div class="field">
                        <b-radio value="auto">Auto-Generate New Password</b-radio>
                    </div>
                    <div class="field">
                        <b-radio value="manual">Manually Set New Password</b-radio>
                        <p class="control">
                        <input type="text" class="input" name="password" id="password" v-if="password_options == 'manual'" placeholder="Manually give a password to this user" required="">
                        </p>
                    </div>   
                    </b-radio-grou>           
                </div>  
                <button class="button is-primary">Edit User</button>
            </form>
        </div>
    </div>
</div>
    </div>

- <div v-model="password_options">: v-model is not supported on this element type. If you are working with contenteditable, it's recommended to wrap a library dedicated for that purpose inside a custom component.

组件代码：

require('./bootstrap')

window.Vue = require('vue')
import Buefy from 'buefy';
import Vue from 'vue';
Vue.use(Buefy.default);

var app = new Vue({ 
    el:'#app', 
    data:{ auto_password:true } 
});
var app = new Vue({
    el: '#app',
    data() {
        return {
            password_options: ''
        }
    }
});
var app = new Vue({
    el: '#app',
    data: {}
});

$(document).ready(function(){
    $('.dropdown').hover(function(e){
        $(this).toggleClass('is-open');
    });
});

Answer 1

您正在将模型绑定到 div，这仅适用于输入，如果您只想显示或隐藏 div，请将 v-model 更改为 v-if

<div class="management-area" id="app" style="position: absolute;top: 4rem;left: 200px;right: 0;">
    <div class="flex-container">
<div class="columns m-t-10">
    <div class="column">
        <h1 class="title">Edit User</h1>
    </div>
</div>
<div class="columns">
    <div class="column">
        <h1 class="m-t-0"></h1>
        <form action="{{route('users.update', $user->id)}}" method="POST">
        {{method_field('PUT')}}
        {{csrf_field()}}
            <div class="field">
                <label for="name" class="label">Name</label>
                <p class="control">
                    <input type="text" class="input" name="name" id="name" value="{{$user->name}}">
                </p>
            </div>
            <div class="field">
                <label for="email" class="label">Email</label>
                <p class="control">
                    <input type="email" class="input" name="email" id="email" value="{{$user->email}}">
                </p>
            </div>
            <div class="field">
                <label for="password" class="label">Password</label>
                <b-form-checkbox-group v-model="password_options">
                    <div class="field">
                        <b-form-checkbox value="keep">Do Not Change Password</b-form-checkbox>
                    </div>
                    <div class="field">
                        <b-form-checkbox value="auto">Auto-Generate New Password</b-form-checkbox>
                    </div>
                    <div class="field">
                        <b-form-checkbox value="manual">Manually Set New Password</b-form-checkbox>
                        <p class="control">
                        <input type="text" class="input" name="password" id="password" v-if="password_options == 'manual'" placeholder="Manually give a password to this user" required>
                        </p>
                    </div>   
                </b-radio-group>           
            </div>  
            <button class="button is-primary">Edit User</button>
        </form>
    </div>
</div>

Vue js 在我的 laravel 中不起作用

Vue js is not working in my laravel

laravel

vue.js

vuejs2

bulma

buefy