Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div id="app">
- <table v-if="mode">
- <tr>
- <td>E-mail cím:</td>
- <td>
- <input placeholder="E-mail cím" v-model="o.email">
- </td>
- </tr>
- <tr>
- <td>Neve:</td>
- <td>
- <input placeholder="Név" v-model="o.name">
- </td>
- </tr>
- <tr>
- <td>Született:</td>
- <td>
- <input type="date" v-model="o.i1">
- </td>
- </tr>
- <tr>
- <td>Neme:</td>
- <td>
- <input name="x" type="radio" value="Férfi" v-model="o.i2">
- <input name="x" type="radio" value="Nő" v-model="o.i2">
- </td>
- </tr>
- <tr>
- <td colspan="2" class="klassz">
- <button @click="f()" :disabled="!(o.email && o.i1 && o.name && o.i2)">Ment</button>
- <button @click="o={},mode=0">Mégse</button>
- </td>
- </tr>
- </table>
- <table v-if="!mode">
- <tr v-for="(sor,i) in Array.from(t)" :key="sor.email">
- <td>{{ i+1 }}.</td>
- <td>{{ sor[0] }}</td>
- <td>{{ sor[1].name }}</td>
- <td>{{ sor[1].i1 }}</td>
- <td>{{ sor[1].i2 }}</td>
- <td class="katt" @click="o=t.get(sor[0]),mode=2">✏</td>
- <td class="katt" @click="torol(sor[0])">⨯</td>
- </tr>
- <tr>
- <td colspan="7"
- class="klassz">
- <button @click="mode=1">Új elem</button>
- </td>
- </tr>
- </table>
- </div>
- </template>
- <script>
- export default {
- name: "App",
- data() {
- return {
- o: {},
- t: new Map(),
- mode: 0
- };
- },
- mounted(){
- var ldb = localStorage.getItem('db')
- if (ldb) {
- this.t = new Map()
- JSON.parse( ldb ).forEach( v => {
- this.t.set(v[0],v[1])
- })
- }
- },
- methods: {
- torol(mit) {
- this.t.delete(mit)
- this.$forceUpdate()
- localStorage.setItem('db',JSON.stringify(Array.from(this.t)))
- },
- f() {
- if (this.mode===1) {
- if (this.t.has(this.o.email)) {
- alert("van már ilyen e-mail cím");
- } else {
- this.t.set(this.o.email, this.o);
- this.o = {};
- //this.$forceUpdate();
- this.mode=0
- }
- } else {
- this.t.set(this.o.email, this.o);
- this.o = {};
- //this.$forceUpdate();
- this.mode=0
- }
- localStorage.setItem('db',JSON.stringify(Array.from(this.t)))
- }
- }
- };
- </script>
- <style>
- tr {
- background-color:burlywood;
- }
- td {
- padding: 5px;
- margin: 10px;
- border-bottom: 1px solid black;
- }
- td.klassz {
- text-align: center;
- }
- td.katt {
- cursor: pointer;
- }
- td.katt:hover {
- text-shadow:1px 1px 3px black;
- color:red;
- }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement