please have a problem here. I want to display the value from the input form: name and position. but the data is in the form of json.
{"id":5,"name":"the name","pos":"the position"}
This is template html vue js
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
Edit <b>{{name}}</b>
</div>
<div class="card-body">
<form #submit="edit()" method="post" onclick="return false">
<div class="form-group">
<label for="">Name</label>
<input v-model="input.nameInput" type="text" value="?" autocomplete="off" class="form-control">
</div>
<div class="form-group">
<label for="">Position</label>
<input v-model="input.posInput" value="?" type="text" autocomplete="off" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Edit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
And this is java script of template file vue js
<script>
export default {
data(){
return{
name:'',
pos:'',
input:{
nameInput:'',
posInput:''
}
}
},
methods:{
getEmploye(){
axios.get('/employes_api/'+this.$route.params.id).then(response => {
this.name = response.data.name;
this.pos = response.data.pos;
});
},
edit(){
axios.put('/employes_api/'+this.$route.params.id, {
name: this.name,
pos: this.position,
}).then(response => {
this.$route.employe;
});
}
},
mounted(){
this.getEmploye();
}
}
</script>
Thanks for your help.
As described in your question, if the data received is
{"id":5,"name":"the name","pos":"the position"}
then you getEmploye method should be :
getEmploye(){
axios.get('/employes_api/'+this.$route.params.id).then(response => {
this.name = response.name;
this.pos = response.pos;
});
On element’s value, you may use the following to display data you have received from the api:
value=“{{name}}”
That means you are getting the value from name data.
Also, to test if that works, you may assign first a dummy data/value to name.
You don't need to make two separate variables one for the inputs and the other for the display, just keep the same variable for both, it will be automatically updated on the display and in the inputs while the user is typing, that's the beauty of Vue.
So instead of
data(){
return{
name:'',
pos:'',
input:{
nameInput:'',
posInput:''
}
}
},
Just keep
data(){
return{
name:'',
pos:''
}
},
For the template inputs use :
<input v-model="name" type="text" autocomplete="off" class="form-control">
...
<input v-model="pos" type="text" autocomplete="off" class="form-control">
The overall result should look like this :
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
Edit <b>{{name}}</b>
</div>
<div class="card-body">
<form #submit="edit()" method="post">
<div class="form-group">
<label for="">Name</label>
<input v-model="name" type="text" autocomplete="off" class="form-control">
</div>
<div class="form-group">
<label for="">Position</label>
<input v-model="position" type="text" autocomplete="off" class="form-control">
</div>
<button type="submit" class="btn btn-primary">Edit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
name:'',
pos:''
}
},
methods:{
getEmploye(){
axios.get('/employes_api/'+this.$route.params.id).then(response => {
this.name = response.data.name;
this.pos = response.data.pos;
});
},
edit(){
axios.put('/employes_api/'+this.$route.params.id, {
name: this.name,
pos: this.pos,
}).then(response => {
this.$route.employe;
});
}
},
created(){
this.getEmploye();
}
}
Ps : Didn't test the code, if there is any error just let me know
Use :value=“name”, e.g <input :value="name"/>.
Related
I use javascript auto complete to finish the input text.
But I can't use v-model function of vue3 to get full value in my code.
Does any one can give me some advise, thanks.
<div class="row">
<div class="col-md-3">
<label for="fnode">fnode:</label>
<input type="text" class="form-control required" id="fnode" name="fnode" v-model="fnode">
</div>
<div class="col-md-3">
<label for="fnode">fnode:</label>
<button class="btn btn-primary form-control">{{ fnode }}</button>
</div>
</div>
<script>
Vue.createApp({
data: function(){
return {
fnode: '',
};
},
methods: {
},
mounted: function() {
},
}).mount('#form1');
</script>
Good morning all,
Here I am starting in vue.js and I get stuck on a point that does not seem complicated.
Indeed, I try to pass my list of localities, in my adduser component. So that when creating the user he has to select localities.
But impossible to pass the list to him yet I know that it is necessary to use the props but I can not.
Can you help me ?
Thank you
Component Add user :
<template>
<div class="submitform">
<div v-if="!submitted">
<div class="form-group">
<label for="nom">Nom</label>
<input type="text" class="form-control" id="nom" required v-model="utilisateur.nom" name="nom">
</div>
<div class="form-group">
<label for="prenom">Prenom</label>
<input type="text" class="form-control" id="prenom" required v-model="utilisateur.prenom" name="prenom">
</div>
<div class="form-group">
<label for="profession">Profession</label>
<input type="text" class="form-control" id="profession" required v-model="utilisateur.profession" name="profession">
</div>
<div class="form-group">
<label for="adresse">Adresse</label>
<input type="text" class="form-control" id="adresse" required v-model="utilisateur.adresse" name="adresse">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="email" required v-model="utilisateur.email" name="email">
</div>
<div class="form-group">
<label for="login">Login</label>
<input type="text" class="form-control" id="login" required v-model="utilisateur.login" name="login">
</div>
<div class="form-group">
<label for="mobile">Mobile</label>
<input type="text" class="form-control" id="mobile" required v-model="utilisateur.mobile" name="mobile">
</div>
<div class="form-group">
<label for="password">password</label>
<input type="text" class="form-control" id="password" required v-model="utilisateur.password" name="password">
</div>
<!--<div>
<ul>
<li v-for="(localite, index) in localites" :key="index">
{{localite.ville}}
</li>
</ul>
</div>-->
<!--<div>
<select>
<option v-for="(localite, index) in localites" :key="index">
{{localite.ville}}
</option>
</select>
</div>-->
<button v-on:click="saveUtilisateur" class="btn btn-success">Submit</button>
</div>
<div v-else>
<h4>You submitted successfully!</h4>
<button class="btn btn-success" v-on:click="newUtilisateur">Add</button>
</div>
</div>
</template>
<script>
import http from "../http-common";
import Localite from "../components/LocalitesList.vue"
export default {
name: "add-utilisateur",
data()
{
return {
utilisateur: {
id: 0,
nom:"",
prenom:"",
profession:"",
adresse:"",
email:"",
login:"",
mobile:"",
password:"",
actif: 0,
localite: 0
},
Localite: [],
submitted: false
};
},
components:
{
'localite': Localite
},
methods:
{
/* eslint-disable no-console */
saveUtilisateur() {
var data = {
nom: this.utilisateur.nom,
prenom: this.utilisateur.prenom,
profession: this.utilisateur.profession,
adresse: this.utilisateur.adresse,
email: this.utilisateur.email,
login: this.utilisateur.login,
mobile: this.utilisateur.mobile,
password: this.utilisateur.password,
localite: this.utilisateur.localite
};
http
.post("/utilisateur", data)
.then(response => {
this.utilisateur.id = response.data.id;
console.log(response.data);
})
.catch(e => {
console.log(e);
});
this.submitted = true;
},
/* retrieveLocalites() {
http
.get("/localites")
.then(response => {
this.localites = response.data; // JSON are parsed automatically.
console.log(response.data);
})
.catch(e => {
console.log(e);
});
},
refreshList() {
this.retrieveLocalites();
}
/* eslint-enable no-console */
},
/*mounted() {
this.retrieveLocalites();
}*/
/* eslint-enable no-console */
};
</script>
<style>
.submitform {
max-width: 300px;
margin: auto;
}
</style>
Component Localite:
<template>
<div v-if="this.localite">
<h4>Localite</h4>
<div>
<label>CP: </label> {{this.localite.cp}}
</div>
<div>
<label>Ville: </label> {{this.localite.ville}}
</div>
<span class="button is-small btn-danger" v-on:click="deleteLocalite()">Delete</span>
</div>
<div v-else>
<br/>
<p>Please click on a Localite...</p>
</div>
</template>
<script>
import http from "../http-common";
export default
{
name: "localite",
props: ["localite"],
methods:
{
/* eslint-disable no-console */
deleteLocalite() {
http
.delete("/localite/" + this.localite.id)
.then(response => {
console.log(response.data);
this.$emit("refreshData");
this.$router.push('/localite');
})
.catch(e => {
console.log(e);
});
}
/* eslint-enable no-console */
}
};
</script>
Thanks
Props are used to pass data down in the component hierarchy. If you want to get data from an API and pass it to several components I would suggest getting the list of Localite's in a parent component and then pass it via props. A rule of thumb is to have more logic in parent components and less logic in child components.
Example:
<template>
<div>
<localite :localite="listOfLocalites" />
</div>
</template>
Then you can in your localite component get the the prop via props: ["localite"]
I need some help. I am trying to load my javascript file and listing to changing on checkbook when I click my checkbox to show or hide password. But for some reason it is not working. I have try everything, but out of ideas how to solve the problem.
$(document).ready(function () {
$('#showPassword').on('click', function () {
if ($(this).prop('checked')) {
$('#password').attr('type', 'text')
} else {
$('#password').attr('type', 'password')
}
})
<template>
<div class="container-fluid p-0">
<div class="col-md-12 content">
<div class="col-md-6 join-container" id="join-container">
<form class="col-md-12 col-sm-12"
>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control"
id="password" v-model="password"
placeholder="Password">
</div>
<div class="form-group pl-0">
<div class="form-check">
<input class="form-check-input" type="checkbox"
id="showPassword" />
<label class="form-check-label"
for="show-password">Show Password</label>
</div>
</div>
<br>
</form>
</div>
</div>
</template>
<script>
import Main from '../script/Index.js'
export default {
name: 'Register',
data: () => ({
}),
methods: {
},
components: {
Main
}
}
</script>
You're using jQuery event handlers (the $ bit) outside a script tag in a Vue component file. I wouldn't expect that code to do anything.
If you wanted that code to execute, you'd need it to be inside the <script> tags in your component. However, Vue already has event listeners (link to documentation), including listening for clicks on elements. There is no need to use two frameworks for this.
To implement a rough show password button (using your existing markup), here's how I'd do it (removing extra markup to highlight the important Vue-logic):
<template>
<div>
<input :type="passwordType" v-model="password">
<input v-model="showPassword" type="checkbox"/>
</div>
</template>
<script>
export default {
data() {
return {
showPassword: false,
password: ''
}
},
computed: {
passwordType() {
if (this.showPassword) {
return 'text'
} else {
return 'password'
}
}
}
}
</script>
It's not advisable to mix jQuery and Vue since they have separate lifecycles.
Vue is able to do everything you're after by itself.
Simply bind your checkbox state to a Vue data property and use that to determine the password field's type, eg
<input :type="passwordFieldType" class="form-control"
id="password" v-model="password"
placeholder="Password">
<!-- snip -->
<input v-model="passwordFieldType" true-value="text" false-value="password"
class="form-check-input" type="checkbox"
id="showPassword">
data: () => ({
passwordFieldType: 'password'
})
See https://v2.vuejs.org/v2/guide/forms.html#Checkbox-1
new Vue({
el: '#app',
data: () => ({
password: '',
passwordFieldType: 'password'
})
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<form class="col-md-12 col-sm-12" id="app">
<div class="form-group">
<label for="password">Password</label>
<input :type="passwordFieldType" class="form-control" id="password" v-model="password" placeholder="Password">
</div>
<div class="form-group pl-0">
<div class="form-check">
<input v-model="passwordFieldType" true-value="text" false-value="password"
class="form-check-input" type="checkbox" id="showPassword" />
<label class="form-check-label" for="show-password">Show Password</label>
</div>
</div>
<br>
</form>
I have a contact form. On submission, it displays a success message and it should store that data to $localStorage.
But, Form data not is not submitting as I do not see submitted form data in response under network in dev tools and hence I am unable to save it to $localStorage.
below is the code for respective files.
link to plunker
contact.html
<div ngController="contactController as vm">
<div class="heading text-center">
<h1>Contact Us</h1>
</div>
<div>
<form class="needs-validation" id="contactForm" novalidate method="post" name="vm.contactForm" ng-submit="saveform()">
<div class="form-group row">
<label for="validationTooltip01" class="col-sm-2 col-form-label">Name</label>
<div class="input-group">
<input type="text" class="form-control" id="validationTooltipName" placeholder="Name" ng-model="vm.name" required>
<div class="invalid-tooltip">
Please enter your full name.
</div>
</div>
</div>
<div class="form-group row">
<label for="validationTooltipEmail" class="col-sm-2 col-form-label">Email</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="validationTooltipUsernamePrepend">#</span>
</div>
<input type="email" class="form-control" id="validationTooltipEmail" placeholder="Email"
aria-describedby="validationTooltipUsernamePrepend" ng-model="vm.email" required>
<div class="invalid-tooltip">
Please choose a valid email.
</div>
</div>
</div>
<div class="form-group row">
<label for="validationTooltip03" class="col-sm-2 col-form-label">Query</label>
<div class="input-group">
<input type="text" class="form-control" id="validationTooltipQuery" ng-model="vm.query" placeholder="Query" required>
<div class="invalid-tooltip">
Please write your Query.
</div>
</div>
</div>
<div class="btn-group offset-md-5">
<button class="btn btn-primary" type="submit">Submit</button>
<button class="btn btn-default" type="button" id="homebtn" ng-click="navigate ('home')">Home</button>
</div>
</form>
<span data-ng-bind="Message" ng-hide="hideMessage" class="sucessMsg"></span>
</div>
</div
contact.component.js
angular.module('myApp')
.component('contactComponent', {
restrict: 'E',
$scope:{},
templateUrl:'contact/contact.html',
controller: contactController,
controllerAs: 'vm',
factory:'userService',
$rootscope:{}
});
function contactController($scope, $state,userService) {
var vm = this;
vm.saveform = function(){
var name= vm.name;
var email= vm.email;
var query= vm.query;
console.log(name);
console.log(email);
console.log(query);
$scope.hideMessage = false;
$scope.Message = "Your query has been successfully submitted.";
$scope.user = userService;
};
$scope.navigate = function(home){
$state.go(home)
};
};
//localStorage code
function userService(saveform) {
var service = {
model: {
name: '',
email: '',
query:''
},
SaveState: function () {
sessionStorage.userService = angular.toJson(service.model);
},
RestoreState: function () {
service.model = angular.fromJson(sessionStorage.userService);
}
}
$rootScope.$on("savestate", service.SaveState);
$rootScope.$on("restorestate", service.RestoreState);
return service;
$rootScope.$on("$routeChangeStart", function (event, next, current) {
if (sessionStorage.restorestate == "true") {
$rootScope.$broadcast('restorestate'); //let everything know we need to restore state
sessionStorage.restorestate = false;
}
});
//let everthing know that we need to save state now.
window.onbeforeunload = function (event) {
$rootScope.$broadcast('savestate');
};
};
There are no errors in console.
I am submitting a form - and adding the contents to an array, however whenever the item is added to the array, it is still bound to the form.
I would like to add the item, clear the form. Something like jquery's reset();
Here's my template:
<div class="col-xs-12" ng-controller="ResourceController">
<div class="col-md-4">
<h3>Name</h3>
</div>
<div class="col-md-8">
<h3>Description</h3>
</div>
<form class="form-inline" role="form" ng-repeat="item in resources">
<div class="form-group col-md-4">
<input type="text" class="form-control" value="{{ item.name }}"/>
</div>
<div class="form-group col-md-7">
<input type="text" class="form-control" value="{{ item.description }}"/>
</div>
</form>
<form class="form-inline" role="form" name="addResourceForm" ng-submit="addResource()">
<div class="form-group col-md-4">
<input type="text" class="form-control" name="name" ng-model="name" placeholder="Name"/>
</div>
<div class="form-group col-md-7">
<input type="text" class="form-control" name="description" ng-model="description" placeholder="Description"/>
</div>
<div class="form-group col-md-1">
<button type="submit" class="btn btn-default">Add</button>
</div>
</form>
</div>
And my controller:
(function(){
var app = angular.module('event-resources', []);
app.controller('ResourceController', function($scope){
$scope.addResource = function(){
$scope.resources.push(this);
}
var defaultForm = {
name : '',
description: ''
};
$scope.resources = [
{
name: 'Beer',
description: 'Kokanee'
},
{
name: 'Pucks',
description: 'Black Round Things'
}
]
});
})();
Use angular.copy() to copy the item data to the resources array, and then you can safely clear the item data. The angular.copy() makes a deep copy of the object, which is what you want.
Alternately, here is a simpler method, which doesn't use any extra method calls:
$scope.addResource = function() {
$scope.resources.push({
name: $scope.name, // recreate object manually (cheap for simple objects)
description: $scope.description
});
$scope.name = ""; // clear the values.
$scope.description = "";
};
$scope.addResource = function(){
$scope.resources.push(angular.copy(this));
$scope.name="";
$scope.description=""
}
Push the copy to the resources array and change name and description back to ""