Multi tool use

Vue js is not working in my laravel

I'm following the tutorial form DevMarketer and got lost when Vue commands

Vue commands

dont work on my codes. I run npm run dev and npm run watch to generate the errors but, nothing happens seems like my code is totally working then i check on developer tool on my browser then the error pops up comming from root.

npm run dev

npm run watch

developer tool

root

The error message is:
[Vue warn]: Property or method "password_options" 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.

And this is the breakdown:

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


dev tool vue error:

[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.


Component code:

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');
});
});


2 Answers
2

You are binding the model to a div, which only works for inputs, if you want to only show or hide the div, change the v-model to v-if

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>


maybe you can show us your full code of your component?

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.