Develop Reference

Vuejs import / load javascript file

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>

Where/How to define a submit destination for my self created form (Vue) component?

I want to re-use a form component through my website, but the submit button will have to handle different things every time (display different data, depending which page is calling the form-component)
I'm a little bit new to paying around with Vue components and passing data between them, up until now I did messy one-page apps.
My current plan is have the form get the inputs/filters (from the form component), and when clicking submit, it should send this data (somehow?) to the element that called it - and will know how to handle it to the specific case from where it was called. I hope this is the right approach to this kind of scenario (?).
Is my plan a proper use of Vue / a proper way to submit a form from an external form-component?
In what way do I trigger the submit to send data / run a method outside of my DashboardForm.vue component?
How do I send fetched data of DashboardForm.vue component from ReportType1.vue and re-use this functionality in ReportType2.vue.
This is my Vue Form component (DashboardForm.vue):
<template>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<form id="mainForm" class="form-material row" method="POST">
<div class="" id="date-range">
<datepicker v-model="startDate" input-class="form-control inputDate" placeholder="Start Date" required></datepicker>
<div class="input-group-append">
<span class="input-group-text b-0 text-white"> to </span>
</div>
<datepicker v-model="endDate" input-class="form-control inputDate" placeholder="End Date" required></datepicker>
<input type="button" class="btn btn-info waves-effect waves-light" v-on:click="groupFilterDisplay(true);" value="Filter by Group"/>
<!-- <input type="button" id="submit-btn" class="btn btn-success waves-effect waves-light" v-on:click="loadNew" value="Submit"/> -->
<input type="button" id="submit-btn" class="btn btn-success waves-effect waves-light" value="Submit"/>
</div>
</form>
</div>
</div>
</div>
<transition name="fade">
<div id="groupFilter" class="popupGroupFilter" v-if="groupFilter">
<div id="filterArea">
<input type="text" v-model="searchGroupInput" placeholder="Search" class="gfSearch">
<span class="gfTitle">Filter by Group</span>
<hr>
</div>
<div class="ulTree">
<ul>
<tree_item class="item" v-bind:model="groupTree"></tree_item>
</ul>
</div>
<div v-on:click="applyGroupFilter();" class="gfClose gfApply"><span>✔ Apply</span></div>
<div v-on:click="groupFilterDisplay(false);" class="gfClose"><span>X Close</span></div>
</div>
</transition>
</div>
</template>
<script>
// import { GF } from '../mixins/GF.js';
export default {
name: 'DashboardForm',
// mixins: [GF],
data() {
return {
groupTree: window.groups,
searchGroupInput: '',
searchGroupArray: [],
groupFilterApplied: false,
groupFilterBackup: [],
selectedIds: [],
groupFilter: false,
startDate: null,
endDate: null,
mode: 0,
}
},
props: {
options: Array
},
watch: {
'searchGroupInput': function (newVal, oldVal) {
this.groupTree = this.searchGroupResult();
}
},
methods: {
recurseGroups: function (arr, action) {
},
applyGroupFilter: function () {
},
groupFilterDisplay: function (display) {
},
searchGroupResult: function () {
},
fetchGroupIds: function () {
}
}
};
</script>
This is the component that uses the DashboardForm for example (
ReportType1.vue):
<script>
import DashboardForm from "../tools/DashboardForm.vue";
export default {
components: {
DashboardForm
},
data() {
return {
};
},
created() {
},
mounted() {
},
destroyed() {
},
watch: {
},
methods: {
}
}
</script>
<!-- Template -->
<template>
<div>
<!-- Form -->
<DashboardForm/>
<!-- form result -->
<div id="resultContainer"> <datatable/> </div>
</div>
</template>

Okay if I understood you well, we are trying to build a reusable form component.
I will give you a quick overview of how VUE components communicate.
The component takes its necessary inputs using the props.
The component inner HTML can be passed from its user by using slot.
The component fire events to tell its user that there is something happened inside me.
Example of the three cases:
Your component my-form template:
<form>
<div class="row">
<slot></slot>
</div>
<div class="row">
<div class="col-12">
<button type="button" class="btn btn-default" #click="onSubmit"></button>
<button v-if="hasReset" class="btn btn-danger" #click="onReset"></button>
</div>
</div>
</form>
Your component js file:
export default {
name: 'my-form',
data() {
return {
}
},
props: {
reset: boolean
},
computed: {
hasReset: function(){
return this.reset;
}
}
methods: {
onSubmit: function(){
let data = { "name": "dummy data" };
this.$emit("submit", data);
},
onReset: function(){
let data = { "name": "" };
this.$emit("reset", data);
}
}
}
After that, you can use my-form component as below:
<my-form :reset="formHasReset" #submit="onFormSubmit" #reset="onFormReset">
<input class="col-12" type="text" name="name">
<input class="col-12" type="text" name="username">
<input class="col-12" type="password" name="password">
<input class="col-12" type="email" name="email">
</my-form>
And the javascript is:
data(){
formHasReset: true
},
methods: {
onFormSubmit: function(data){
console.log(data.name); //Should give you 'dummy data'
},
onFormReset: function(data){
console.log(data.name); //Should give you ''
}
}
I hope it is clear now for you :).

how to set value form input vue js from json

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"/>.

How to select rows based on string options in html vue js?

I need to add new rows based on the select options.
If my option is "kfc" I need to select a particular row. If my selected option is "cemrt", I need to add another row.
<div class="card-content" v-for="(bok, index) in rules" :key="index">
<div class="row">
<div class="col-md-6">
<div class="form-group label-floating">
<label class="control-label">Booked</label>
<select class="form-control" v-model="bok.name">
<option value="SEENAT">SEENAT</option>
<option value="CEMRT">CEMRT</option>
<option value="KFC">KFC</option>
</select>
</div>
</div>
</div>
<div class="row" v-if="bok.name == SEENAT"> //NOT WORKING FROM HERE
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Arms(if any)</label>
<input type="text" class="form-control" v-model="bok.data.head" required="">
</div>
</div>
</div>
<div class="row" v-if="bok.name == KFC">
<div class="col-md-4">
<div class="form-group label-floating">
<label class="control-label">Arms(if any)</label>
<input type="text" class="form-control" required="">
</div>
</div>
</div>
</div>
But I am using this code not able to add rows based on the options.
My vue js code is
addForm = new Vue({
el: "#addForm",
data: {
rules : [{
name:null,
section:null,
data : [{head:null,value:null}]
}],
},
methods: {
addNewRules: function() {
this.rules.push({ name: null, section: null,data [{head:null,value:null}] });
},
},
});
If I use option value as 1,2,3 etc. I am getting the result.
But I need to send SEENAT,CEMRT,KFC as data. How can I able to achieve the result.

Hard to tell. A reproduction on codesandbox would be welcome.
What I can see in your code at a first glance :
1) You forgot quotes around the options keys and thus it expects a constant. The fact you're using double equals instead of triple doesn't help:
v-if="bok.name === 'SEENAT'" // this
v-if="bok.name == SEENAT" // instead of that
2) data should be a function:
data() {
return {
rules: [
{
name: null,
section: null,
data: [{ head: null, value: null }]
}
]
};
},

How to clear angularJS form after submit?

I have save method on modal window once user execute save method i want to clear the form fields, I have implemented $setPristine after save but its not clearing the form. How to achieve that task using angularJS ?
So far tried code....
main.html
<div>
<form name="addRiskForm" novalidate ng-controller="TopRiskCtrl" class="border-box-sizing">
<div class="row">
<div class="form-group col-md-12 fieldHeight">
<label for="topRiskName" class="required col-md-4">Top Risk Name:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="topRiskName" ng-model="topRiskDTO.topRiskName"
name="topRiskName" required>
<p class="text-danger" ng-show="addRiskForm.topRiskName.$touched && addRiskForm.topRiskName.$error.required">Top risk Name is required field</p>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label for="issuePltfLookUpCode" class="col-md-4">Corresponing Issue Platform:</label>
<div class="col-md-8">
<select
kendo-drop-down-list
data-text-field="'text'"
data-value-field="'id'" name="issuePltfLookUpCode"
k-option-label="'Select'"
ng-model="topRiskDTO.issuePltfLookUpCode"
k-data-source="issuePltDataSource"
id="issuePltfLookUpCode">
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12 fieldHeight">
<label for="issueNo" class="col-md-4">Issue/Risk Number:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="issueNo" ng-model="topRiskDTO.issueNo"
name="issueNo">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-primary pull-right" ng-disabled="addRiskForm.$invalid" ng-click="submit()">Save</button>
<button class="btn btn-primary pull-right" ng-click="handleCancel">Cancel</button>
</div>
</form>
</div>
main.js
$scope.$on('addTopRisk', function (s,id){
$scope.riskAssessmentDTO.riskAssessmentKey = id;
$scope.viewTopRiskWin.open().center();
$scope.submit = function(){
rcsaAssessmentFactory.saveTopRisk($scope.topRiskDTO,id).then(function(){
$scope.viewTopRiskWin.close();
$scope.$emit('refreshTopRiskGrid');
$scope.addRiskForm.$setPristine();
});
};
});

Hey interesting question and I have messed around with it and I have come up with something like this (I have abstracted the problem and simplified it, it is up to you to implent it to your likings). Likely not super elegant but it does the job: Fiddle
<div ng-app="app">
<div ng-controller="main">
<form id="form">
<input type="text" />
<input type="text" />
</form>
<button ng-click="clear()">clear</button>
</div>
</div>
JS
angular.module("app", [])
.controller("main", function ($scope) {
$scope.clear = function () {
var inputs = angular.element(document.querySelector('#form')).children();
angular.forEach(inputs, function (value) {
value.value="";
});
};
})
Hope it helps.
Edit
If you give all your inputs that must be cleared a shared class you can select them with the querySelector and erase the fields.

Refer to this page: http://blog.hugeaim.com/2013/04/07/clearing-a-form-with-angularjs/
$setPristine will only clear the variables not the form. To clear the form set their values to blank strings
<script type="text/javascript">
function CommentController($scope) {
var defaultForm = {
author : "",
email : "",
comment: ""
};
$scope.postComments = function(comment){
//make the record pristine
$scope.commentForm.$setPristine();
$scope.comment = defaultForm;
};
}
</script>

Clear topRiskDTO
Looking at your example, seems that clearing topRiskDTO will give you this result.
for instance:
$scope.submit = function(){
// ...
// The submit logic
// When done, Clear topRiskDTO object
for (var key in $scope.topRiskDTO)
{
delete $scope.topRiskDTO[key];
}
};

You have to manually reset the data. See this website for more info.
You also have to call
$form.$setPristine()
To clear all the css classes.