I've a password_reset.vue script as below:
<template>
<form>
<div class="alert alert-danger" v-if="form.errors.has('photo')">
#{{ form.errors.get('photo') }}
</div>
<div class="row">
<div class="col-md-3">
<div class="label">Current Password</div>
</div>
<div class="col-md-9">
<div class="field--wrapper">
<label for="current_password">Current Password</label>
<input class="nom-fields" type="password"
v-model="form.current_password"
id="current_password" name="current_password"
placeholder="Current Password" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="label">Repeat Password</div>
</div>
<div class="col-md-9">
<div class="field--wrapper">
<label for="password_repeat">Repeat Password</label>
<input class="nom-fields" type="password"
v-model="form.password_repeat"
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9 text-right">
<button id="change_password"
class="blue-btn" v-on:click="update">
Change Password
</button>
</div>
</div>
</form>
</template>
<script>
export default{
data(){
return{
form: new MyForm({
current_password: '',
new_password: '',
password_repeat: '',
message: ''
})
};
},
methods: {
/**
* Update the user's password.
*/
update(e) {
e.preventDefault();
this.form.startProcessing();
this.$http.post('/account/change_password', this.form)
.then(function(response) {
this.form.finishProcessing();
})
.catch(function(response) {
this.form.setErrors(response.data);
});
},
}
}
</script>
and in my bootstrap.js file, I've:
import './interceptors.js';
import './forms/form.js';
import './forms/errors.js';
import PasswordReset from './settings/password_reset.vue'
new Vue({
el: 'body',
components: {
PasswordReset
},
ready() {
}
});
and in the app.js file I've:
import './bootstrap.js'
HTML:
<body>
<password-reset></password-reset>
</body>
But it seems the component is not getting displayed. I tried to alert a msg in the ready method and it's working fine. I'm loading Vue.js also.
Related
so i'm trying to consume an api form laravel via vue.js this is the login page were i did call axios.post :
<template>
<main>
<section class="login-content">
<div class="container h-100">
<div
class="row align-items-center justify-content-center h-100"
>
<div class="col-12">
<div class="row align-items-center">
<div class="col-lg-6">
<h2 class="mb-2">Sign In</h2>
<p>
To Keep connected with us please login with
your personal info.
</p>
<form>
<div class="row">
<div class="col-lg-12">
<div
class="floating-label form-group"
>
<input
class="floating-input form-control"
type="email"
v-model="data.email"
placeholder=" "
/>
<label>Email</label>
</div>
</div>
<div class="col-lg-12">
<div
class="floating-label form-group"
>
<input
class="floating-input form-control"
type="password"
v-model="data.password"
placeholder=" "
/>
<label>Password</label>
</div>
</div>
<div class="col-lg-6">
<div
class="custom-control custom-checkbox mb-3"
>
<input
type="checkbox"
class="custom-control-input"
id="customCheck1"
/>
<label
class="custom-control-label"
for="customCheck1"
>Remember Me</label
>
</div>
</div>
<div class="col-lg-6">
<a
href="auth-recoverpw.html"
class="text-primary float-right"
>Forgot Password?</a
>
</div>
</div>
<button
type="sumbit"
class="btn btn-primary"
#click="login" :disabled="isLogging" :loading="isLogging"
>
Sign In
</button>
<p class="mt-3">
Create an Account
<router-link to="/" exact
>Sign Up</router-link
>
</p>
</form>
</div>
<div class="col-lg-6 mb-lg-0 mb-4 mt-lg-0 mt-4">
<img
src=" asset (html/assets/images/login/01.png)"
class="img-fluid w-80"
alt=""
/>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
</template>
<script>
export default {
data() {
return {
data: {
email: "",
password: ""
},
isLogging: false
};
},
methods: {
async login() {
if (this.data.email == "") return alert("Email is required")
if (this.data.password == "") return alert("Password is required")
/* if(this.data.password.length<6) return this.e ('Incorrect') */
this.isLogging = true
const axios = require('axios')
const headers = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Method": "POST",
"Content-Type": "application/json",
}
axios.post('http://127.0.0.1:8000/?#/login/',{
email: this.email, password: this.password
}, headers)
.then((response)=>{
const data=response.data;
console.log(data);
})
this.isLogging = false
}
},
mounted() {
console.log("Component mounted.");
}
};
</script>
the step of confirmation : email and password are working well but i got the error when i press the button
and this is the login page as u can see : this is the login page as u can see
i was follwing this tuto but like always i had error unlike the man in the tuto this is the link of the tuto
and this is the route :
Route::post('login', 'App\Http\Controllers\Api\AuthController#login');
-I wan't to do like this: if(!editMode) show create page else show update page because my create and edit using same form so I combine it.
-I'm learning online tutorial but the tutorial show create and edit seperately.
-Please Helps and Thank/.\
<template>
<div v-if="!edit">
<h1>Create Post</h1>
<form #submit.prevent="addPost">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Title:</label>
<input type="text" class="form-control" v-model="post.title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Body:</label>
<textarea class="form-control" v-model="post.body" rows="5"></textarea>
</div>
</div>
</div><br />
<div class="form-group">
<button class="btn btn-primary">Create</button>
</div>
</form>
</div>
<div v-else>
<h1>Update Post</h1>
<form #submit.prevent="updatePost">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Title:</label>
<input type="text" class="form-control" v-model="post.title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Body:</label>
<textarea class="form-control" v-model="post.body" rows="5"></textarea>
</div>
</div>
</div><br />
<div class="form-group">
<button class="btn btn-primary">Update</button>
</div>
</form>
</div>
</template>
<script>
export default {
data(){
return {
edit:false,
post:{}
}
},
},
//this is for create
methods: {
addPost(){
let uri = 'http://localhost:8000/post/create';
this.axios.post(uri, this.post).then((response) => {
this.$router.push({name: 'posts'});
});
},
},
//this is for get data before update
created() {
let uri = `http://localhost:8000/post/edit/${this.$route.params.id}`;
this.axios.get(uri).then((response) => {
this.post = response.data;
});
},
//this is for update post
updatePost() {
let uri = `http://localhost:8000/post/update/${this.$route.params.id}`;
this.axios.post(uri, this.post).then((response) => {
this.$router.push({name: 'posts'});
});
}
</script>
**I also set this in my app.js**
{
name: 'create',
path: '/create',
component: PostForm,
props: {editMode: false}
},
{
name: 'edit',
path: '/edit/:id',
component: PostForm,
props: {editMode: true}
}
My Error--->when I press edit btn show create page and using addPost function.
Result--> how to use if else to solve this.... Sorry I'm rookie in programming.
I believe you can simply have the js figure out the add or update.
<template>
<div>
<h1 v-if="!edit">Create Post</h1>
<h1 v-else>Update Post</h1>
<form #submit.prevent="postSomething">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Title:</label>
<input type="text" class="form-control" v-model="post.title">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>Post Body:</label>
<textarea class="form-control" v-model="post.body" rows="5"></textarea>
</div>
</div>
</div><br />
<div class="form-group">
<button v-if="!edit" class="btn btn-primary">Create</button>
<button v-else class="btn btn-primary">Update</button>
</div>
</form>
</div>
</template>
and the js:
methods: {
postSomething(){
if(!this.edit){
this.addPost()
}else{
this.updatePost()
}
},
addPost(){
console.log('should add')
},
updatePost(){
console.log('should update')
}
}
My app seems to be loading without errors except the router does not load the components:
// routes.js
import Login from './components/Login.vue'
const routes = [
{ path: '/', component: Login }
]
export default routes
// vue-config.js
import Vue from 'vue';
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)
const router = new VueRouter({
routes,
mode: 'history'
})
const app = new Vue({
router
}).$mount('#root')
// app.js
require('./vue-config');
I'm using laravels frontend JS setup
Looks like router is loading fine but nor recognizing components:
// Login.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Login</div>
<div class="panel-body">
<form class="form-horizontal" #submit.prevent="login">
<div class="form-group" :class="{ 'has-error': error }">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input v-model="email" id="email" type="email" class="form-control" name="email" required autofocus>
</div>
</div>
<div class="form-group" :class="{ 'has-error': error }">
<label for="password" class="col-md-4 control-label">Password</label>
<div class="col-md-6">
<input v-model="password" id="password" type="password" class="form-control" name="password" required>
<span v-show="error" class="help-block">
<strong>{{ error }}</strong>
</span>
</div>
</div>
<div class="form-group">
<div class="col-md-8 col-md-offset-4">
<button type="submit" class="btn btn-primary">
Login
</button>
<a class="btn btn-link" href="#">
Forgot Your Password?
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as api from '../api'
import swalUtils from '../swalUtils'
export default {
data() {
return {
email: '',
password: '',
error: '',
}
},
methods: {
login() {
utils.spinner();
api.login(this.email, this.password)
.then(resp => {
if(resp.data.access_token) {
localStorage.setItem('token', resp.data.access_token);
// redirect
}
})
.catch(err => { console.log(err); swalUtils.handleError(err); } ); }
},
}
</script>
The vue router mounts the components you define in your routes in the <router-view> tag/component. Most likely you want this in your App.vue or whatever you use as root component. You would end up with something like this:
// App.vue
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: "App"
};
</script>
// main.js
import Vue from 'vue';
import VueRouter from 'vue-router'
import routes from './routes'
import App from './App'
Vue.use(VueRouter)
const router = new VueRouter({
routes,
mode: 'history'
})
const app = new Vue({
router,
components: { App },
template: '<App />'
}).$mount('#app')
Notice that two things have changed in this code. The first is that we are now defining a router-view in our main component, namely App. The second is that we use this component to mount it in main.js.
This is the vuejs component for editing song info. the problem here is with tags.I cannot show the tags of the song in vue select for editing.
<template>
<div>
<a data-toggle="modal" :data-target="'#EditModal'+ modalid" #click="select(song)"><span title="edit" class="glyphicon glyphicon-pencil" ></span></a>
<a class=""><span title="delete" class="glyphicon glyphicon-trash"></span></a>
<!-- Modal for editing song tracks-->
<div class="modal fade" :id="'EditModal'+ modalid" tabindex="-1" role="dialog" aria-labelledby="EditModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="EditModalLabel">Edit Song</h5>
<button type="button" class="close" ref="closemodal" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form ref="uploadform">
<div class="form-group">
<div class="row">
<div class="col-md-12">
<div class="col-md-5">
<button type="button" #click="browseImage" class="btn btn-md btn-default">Choose image:</button>
<div id="image_previews">
<img ref='image' class="" v-bind:src="image" width="200px" height="200px" >
<input class="form-control-file" ref="imageinput" type="file" name="feature_image" #change="showImage($event)">
</div>
</div>
<div class="col-md-7">
<div class="form-group">
<label for="title">Song Title:</label>
<input type="text" v-model="esong.title" class="form-control" required maxlength="255">
</div>
<div class="form-group">
<label for="genre"> Genre (tag atleast one) </label>
<v-select :placeholder="'choose tag'" v-model="tagids" label="name" multiple :options="tags"></v-select>
</div>
<div class="form-group">
<label for="upload_type">Song Upload Type</label>
<select name="upload_type" v-model="esong.upload_type" class="form-control">
<option value="public">public( free )</option>
<option value="private">private( for sale )</option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Description:</label>
<textarea class="form-control" id="message-text" v-model="esong.song_description"></textarea>
</div>
<div class="form-group" v-if="private">
<label for="upload_type">Song price</label>
<input type="text" v-model="esong.amount" class="form-control" required maxlength="255">
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary" #click="edit">Save</button>
</div>
</div>
</div>
</div><!-- end of modal -->
</div>
</template>
<script>
import vSelect from 'vue-select'
export default {
props: ['song','modalid','index','tags'],
components: {vSelect},
mounted() {
},
watch: {
tagids() {
console.log('changed tagids value');
// this.value = this.tagsid;
}
},
computed: {
private() {
if(this.esong.upload_type == 'private') {
return true;
}
return false;
},
},
methods: {
select(song) {
console.log(song.title);
this.getTagIds(song);
},
edit() {
let formData = new FormData();
formData.append('title', this.esong.title);
formData.append('img', this.esong.img);
formData.append('description', this.esong.song_description);
formData.append('upload_type', this.esong.upload_type);
formData.append('amount', this.esong.amount);
formData.append('tags', JSON.stringify(this.tagids));
formData.append('_method', 'PUT');
axios.post('/artist/songs/' + this.esong.id, formData,{
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response =>{
this.$refs.closemodal.click();
toastr.success('successfully edited song.');
this.$emit('update', {song:this.esong,index:this.index});
}).catch(error => {
console.log(error);
});
},
getTagIds(song) {
axios.post('/gettagids', song ).then(response =>{
this.tagids = response.data;
}).catch(error =>{
console.log(error);
});
},
browseImage() {
this.$refs.imageinput.click();
},
showImage(event) {
this.esong.img = event.target.files[0];
this.image = URL.createObjectURL(event.target.files[0]);
}
},
data() {
return {
esong: this.song,
tagids: {id:'', name:'', label:''},
name:'name',
image:this.song.image
}
}
}
</script>
<style scoped>
input[type="file"] {
display: none;
}
#image_previews {
border-radius: 5px;background-color: whitesmoke; width: 200px; height: 200px;
}
.btn{
border-radius: 0px;
}
</style>
here I cannot get the selected value that was inserted in my table. I wanted to show the tagged values for a song. I am able to get all object of tagged songs from axios post request but v-select doesn't shows the selected value retrieved from a table.
the object received from laravel is similar to the object provided in options which work well with v-select..but it doesn't show the same structure object provided to v-model..or should I provide other props. the document for vue select has not mentioned any of these things
In vuejs 2.5 application I use vee-validate library ( http://vee-validate.logaretm.com/examples.html ) with inputs like:
<template>
<section>
<form #submit.prevent="validateBeforeSubmit" class="form-horizontal">
<div class="row">
<div class="col-xs-12 form-group">
<label class="col-xs-12 col-sm-4 control-label" for="name">Name<span class="required"> * </span></label>
<div class="col-xs-12 col-sm-8">
<input v-validate="'required|max:255'" v-model="task.name"
:class="{ 'form-control':true, 'input': true, 'text-danger': vueErrorsList.has('name') }" name="name" id="name"
type="text" placeholder="name">
<span v-show="vueErrorsList.has('name')" class="text-danger">{{ vueErrorsList.first('name') }}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 form-group">
<label class="col-xs-12 col-sm-4 control-label" for="category_id">Category<span class="required"> * </span></label>
<div class="col-xs-12 col-sm-8">
<v-select v-validate="'required'" id="category_id" name="category_id" v-model="selection_category_id" :options=categoriesSelectionList></v-select>
<span v-show="vueErrorsList.has('category_id')" class="text-danger">{{ vueErrorsList.first('category_id') }}</span>
</div>
</div>
</div>
</form>
</section>
</template>
<script>
import {bus} from '../../app';
...
import vSelect from 'vue-select'
Vue.component('v-select', vSelect) // https://github.com/sagalbot/vue-select
import moment from 'moment';
...
export default {
created() {
this.$validator.localize(window.CURRENT_LANG, {
attributes: {
selection_category_id: 'category',
category_id: 'category',
...
}
});
}, // created() {
...
methods
:
{
validateBeforeSubmit()
{
this.$validator.validateAll().then((result) => {
if (result) {
this.updateTask()
} else {
this.showPopupMessage('Error ' + ( this.is_insert ? 'adding' : 'updating' ) + ' task. ', 'error');
}
})
}
, // validateBeforeSubmit() {
updateTask()
{
...
}
, // updateTask() {
} // methods:{
}
</script>
But In the code above the second input is vue-select element ( https://github.com/sagalbot/vue-select )
and it is not validated at all.
I put
v-validate="'required'"
to it but it does not work.
I use validateBeforeSubmit method and if there is a way to make some kind of custom validation, so I would check is value in
select input is selected?
Thank you!