Я нажимаю кнопку редактирования для специальной строки в моей таблице, чтобы получить этот идентификатор объекта JSON в этой строке.Затем я отправляю обратно все данные, связанные с этим идентификатором строки, на мои входные данные для редактирования и повторного обновления этого объекта в db.Json.Нажав на btn_insert, он вызовет функцию addToJsonDb, но ничего не произойдет, и мой объект json не обновится в db.json.
У меня нет проблем с вставкой нового JSONОбъект массива JSON массива пользователей, и я делаю это каждый раз, генерируя новый уникальный идентификатор с помощью Math для добавления этого нового объекта JSON.Моя проблема заключается в обновлении объекта JSON, как я объяснил выше.
Users.vue
<template>
<!-- <textarea class="tinymce tiny"></textarea> -->
<div class="container fluid">
<form class="form1" style="border: solid 1px" >
<div class="form-group">
<!-- style="visibility: hidden;" -->
<input disabled type="text" class="form-control" id="id" placeholder="Id" v-model="usersArray.id" required>
</div>
<div class="form-group">
<label>Ad Soyad</label>
<input type="text" class="form-control" id="name" placeholder="Name" v-model="usersArray.name" required>
</div>
<div class="form-group">
<label>kullanci Adi</label>
<input type="text" class="form-control" id="userName" placeholder="userName" v-model="usersArray.username" required>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" v-model="usersArray.password" required>
</div>
<label for="custom-select" class="label">Select State</label>
<select class="custom-select" v-model="usersArray.state" required>
<option value="Active" selected>Active</option>
<option value="Passive">Passive</option>
</select>
<br><br>
<button id="btn_insert" type="submit" class="btn btn-primary" v-on:click.prevent="addToJsonDb"><i class="fas fa-plus-circle"></i>Add To Json DB</button>
</form>
<br><br>
<!-- npm install -g json-server -->
<!-- json-server --watch db.json -->
<h1 class="text-center">User Table</h1>
<table id="tbl_user" class="table table-bordered table-dark table-hover">
<thead>
<tr>
<!-- <th >id</th> -->
<th>name</th>
<th>username</th>
<th>password</th>
<th>State</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr v-for="item in this.tr_items">
<td>{{ item.name }}</td>
<td>{{ item.username }}</td>
<td>{{ item.password }}</td>
<td>{{ item.state}}</td>
<td><button type="submit" class="btn btn-danger btn-block" v-on:click.prevent="editThis(item)">Edit</button></td>
</tr>
</tbody>
</table>
<br>
</div>
</template>
<script>
export default {
data () {
return {
usersArray: [{
id: 0,
name: '',
username: '',
password: '',
state:''
}],
tr_items: [],
}
},
methods:{
addToJsonDb:function() {
if (this.usersArray.id == null)
{
var secret_id = Math.random().toString(20).substr(5,10);
}
else
{
secret_id = this.usersArray.id;
console.log("this id " + secret_id + " should replace with new data in json database");
}
this.usersArray.id = secret_id;
//push new inserted data from model=our form fields into tr_items
this.tr_items.push(this.usersArray);
this.$http.post('http://localhost:3000/users', {
id: secret_id,
name:this.usersArray.name,
username:this.usersArray.username,
password:this.usersArray.password,
state:this.usersArray.state,
}).then(function(data)
{
console.log(data);
});
this.usersArray.id = '';
},
getdata:function(){
var self = this;
$.getJSON('http://localhost:3000/users',function(data){
console.log(data);
for(var i in data) {
self.tr_items.push(data[i]);
}
});
},
editThis:function(data){
console.log(data.id);
var selected_user = null;
for(var i in this.tr_items)
{
if(this.tr_items[i].id == data.id )
{
selected_user = this.tr_items[i];
break;
}
}
if(selected_user != null) {
this.usersArray.id = selected_user.id;
this.usersArray.name = selected_user.name;
this.usersArray.username = selected_user.username;
this.usersArray.password = selected_user.password;
this.usersArray.state = selected_user.state;
}
else
{
console.error(data.id + " not found in the list");
}
}
},
mounted(){
this.getdata();
},
}
</script>
<style lang="scss" scoped>
.form1{
padding: 3vw;
}
</style>
Сначала я создал файл с именем db.json впапку моего проекта, затем я записал в нее свой массив пользователей JSON.Во-вторых, я установил виртуальный json-сервер с npm install -g json-server, а затем выполнил его с json-server --watch db.json, чтобы посмотреть мой json.db.
db.json
{
"users": [
{
"id": "15759ig248",
"name": "asdsad",
"username": "reza_attitudead",
"password": "123",
"state": "Passive"
},
{
"id": "9036956e1j",
"name": "engin",
"username": "engin",
"password": "321",
"state": "Active"
}
]