<template>
<div >
<div class="pb-2 mb-3 border-bottom">
<h2>Create User</h2>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<router-link to="/">Dashboard</router-link>
</li>
<li class="breadcrumb-item active">
<router-link :to="{name: 'users'}">
<span>Users</span>
</router-link>
</li>
<li class="breadcrumb-item active">Create</li>
</ol>
</nav>
<br />
<div class="container-fluid">
<div v-if="api_error">
<b-alert
:show="alertDismissCountDown"
dismissible
variant="danger"
@dismissed="alertDismissCountDown=0"
@dismiss-count-down="alertCountDownChanged"
>{{api_error}}</b-alert>
</div>
<div class="col-md-8">
<form v-on:keyup.enter="createUser($event)">
<div class="form-group row">
<label class="col-md-3">
Username
<span class="text-danger" style="font-weight:bold;">*</span>
</label>
<div class="col-md-9">
<input
type="text"
class="form-control"
aria-describedby="usernameHelpInline"
v-model="user.username"
autocomplete="off"
/>
</div>
</div>
<div class="form-group row">
<label class="col-md-3">
Date
<span class="text-danger" style="font-weight:bold;">*</span>
</label>
<div class="col-md-9">
<input
type="date"
class="form-control"
aria-describedby="usernameHelpInline"
v-model="user.date"
autocomplete="off"
/>
</div>
</div>
<div class="form-group row">
<label class="col-md-3">
dropdown
<span class="text-danger" style="font-weight:bold;">*</span>
</label>
<div class="col-md-9">
<select
class="form-control"
v-model="user.dropdown"
>
<option
v-for="option in pageOptions"
:key="option.index"
>{{option}}</option>
</select>
</div>
</div>
<!-- teams -->
<div class="form-group row" style="float:right;">
<div class="offset-xs-3 col-xs-9">
<button
type="button"
class="btn btn-primary text-right ma-10px"
v-on:click="saveInput()"
>Submit</button>
</div>
</div>
</form>
</div>
<b-table
show-empty
striped
hover
:fields="fields"
:items="items"
no-local-sorting
responsive
>
</b-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: {
date:"",
username:"",
dropdown:10,
},
pageOptions: [10, 25, 50, 100],
savedData:[],
api_error: "",
items:null,
fields: [
{
key: "username",
sortable: false,
label: "User Name",
},
{
key: "date",
sortable: false,
label: "Date",
},
{
key: "dropdown",
sortable: false,
label: "Dropdown",
}
],
};
},
mounted() {
const savedData = JSON.parse(localStorage.getItem('savedData'));
if(savedData)
{
this.items=savedData;
console.log('vas',savedData);
}
},
methods: {
saveInput: function() {
if(this.user)
{
const existingData = JSON.parse(localStorage.getItem('savedData'));
existingData.push(this.user);
// this.savedData.push(this.user);
localStorage.setItem('savedData',JSON.stringify(existingData));
this.savedData=existingData;
this.items=existingData;
this.user='';
}
return ;
},
}
};
</script>
<template>
<div >
<div class="pb-2 mb-3 border-bottom">
<h2>Create User</h2>
</div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<router-link to="/">Dashboard</router-link>
</li>
<li class="breadcrumb-item active">
<router-link :to="{name: 'users'}">
<span>Users</span>
</router-link>
</li>
<li class="breadcrumb-item active">Create</li>
</ol>
</nav>
<br />
<div class="container-fluid">
<div class="col-md-8">
<div class="form-group row">
<label class="col-md-3">
Username
<span class="text-danger" style="font-weight:bold;">*</span>
</label>
<div class="col-md-9">
<input
type="text"
class="form-control"
aria-describedby="usernameHelpInline"
v-model="task_data.username"
autocomplete="off"
/>
</div>
</div>
<div class="form-group row">
<label class="col-md-3">
Date
<span class="text-danger" style="font-weight:bold;">*</span>
</label>
<div class="col-md-9">
<input
type="date"
class="form-control"
aria-describedby="usernameHelpInline"
v-model="task_data.date"
autocomplete="off"
/>
</div>
</div>
<div class="form-group row">
<label class="col-md-3">
dropdown
<span class="text-danger" style="font-weight:bold;">*</span>
</label>
<div class="col-md-9">
<select
class="form-control"
v-model="task_data.dropdown"
>
<option
v-for="option in dropdownOptions"
:key="option.index"
>{{option}}</option>
</select>
</div>
</div>
<div class="form-group row" style="float:right;">
<div class="offset-xs-3 col-xs-9">
<button
type="button"
class="btn btn-primary text-right ma-10px"
v-on:click="saveInput()"
>Submit</button>
</div>
</div>
</div>
<b-table
show-empty
striped
hover
:fields="fields"
:items="items"
no-local-sorting
responsive
>
</b-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
task_data: {
date:"",
username:"",
dropdown:10,
},
dropdownOptions: [10, 25, 50, 100],
savedData:[],
items:null,
fields: [
{
key: "username",
sortable: false,
label: "User Name",
},
{
key: "date",
sortable: false,
label: "Date",
},
{
key: "dropdown",
sortable: false,
label: "Dropdown",
}
],
};
},
mounted() {
const savedData = JSON.parse(localStorage.getItem('savedData'));
if(savedData)
{
this.items=savedData;
console.log('vas',savedData);
}
},
methods: {
saveInput: function() {
if(this.task_data)
{
const existingData = JSON.parse(localStorage.getItem('savedData'));
if( existingData)
{
existingData.push(this.task_data);
localStorage.setItem('savedData',JSON.stringify(existingData));
this.savedData=existingData;
this.items=existingData;
} else
{
let newData = [this.task_data];
localStorage.setItem('savedData',JSON.stringify(newData));
this.savedData = newData;
this.items = newData;
}
this.task_data={
date:"",
username:"",
dropdown:10,
}
}
return ;
},
}
};
</script>
<template>
<div >
<div class="container-fluid">
<div class="col-md-8">
<div class="form-group row">
<label class="col-md-3">
Username
<span class="text-danger" style="font-weight:bold;">*</span>
</label>
<div class="col-md-9">
<input
type="text"
class="form-control"
aria-describedby="usernameHelpInline"
v-model="task_data.username"
autocomplete="off"
/>
</div>
</div>
<div class="form-group row">
<label class="col-md-3">
Date
<span class="text-danger" style="font-weight:bold;">*</span>
</label>
<div class="col-md-9">
<input
type="date"
class="form-control"
aria-describedby="usernameHelpInline"
v-model="task_data.date"
autocomplete="off"
/>
</div>
</div>
<div class="form-group row">
<label class="col-md-3">
dropdown
<span class="text-danger" style="font-weight:bold;">*</span>
</label>
<div class="col-md-9">
<select
class="form-control"
v-model="task_data.dropdown"
>
<option
v-for="option in dropdownOptions"
:key="option.index"
>{{option}}</option>
</select>
</div>
</div>
<div class="form-group row" style="float:right;">
<div class="offset-xs-3 col-xs-9">
<button
type="button"
class="btn btn-primary text-right ma-10px"
v-on:click="saveInput()"
>Submit</button>
</div>
</div>
</div>
<b-table
show-empty
striped
hover
:fields="fields"
:items="items"
no-local-sorting
responsive
>
</b-table>
</div>
</div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
data() {
return {
task_data: {
date:"",
username:"",
dropdown:10,
},
dropdownOptions: [10, 25, 50, 100],
items:null,
fields: [
{
key: "username",
sortable: false,
label: "User Name",
},
{
key: "date",
sortable: false,
label: "Date",
},
{
key: "dropdown",
sortable: false,
label: "Dropdown",
}
],
};
},
mounted() {
if(this.taskItemsa)
{
this.items=this.taskItems;
}
},
methods: {
saveInput: function() {
if(this.task_data)
{
const existingData = this.taskItems;
if( existingData)
{
existingData.push(this.task_data);
this.$store.commit("settaskItems", existingData);
} else
{
let newData = [this.task_data];
this.$store.commit("settaskItems", newData);
}
this.items = this.taskItems;
this.task_data={
date:"",
username:"",
dropdown:10,
}
}
return ;
},
},
computed: {
...mapState({
taskData : state => state.taskData
}),
...mapGetters([
'taskItems'
]),
}
};
</script>
store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
taskData:[],
},
getters: {
taskItems: state => {
if (state.taskData.length > 0) {
return state.taskData;
}
}
},
mutations: {
settaskItems(state,data){
state.taskData=data;
}
},
actions: {}
});
without mutation can we call state variable
No, without mutation, you cannot directly modify a state variable. In most programming languages, state variables are mutable, meaning their values can be changed during the execution of a program. If you want to modify a state variable without mutation, you would typically need to create a new variable and assign it the updated value based on the existing state variable.
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count; // Access the state management variable
},
},
methods: {
increment() {
this.$store.commit('increment'); // Update the state management variable directly
},
},
};
</script>
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++; // Update the state management variable directly
},
},
});
export default store;
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
computed: {
count() {
return this.$store.state.count; // Access the state management variable
},
},
methods: {
increment() {
this.$store.commit('increment'); // Update the state management variable directly
},
},
};
</script>
No comments:
Post a Comment