Vue.js - 新增
上次的單字卡系統，
如果我要新增的話，我需要一個Form，我打算用localStorage做儲存，
但發現localStorage好像無法儲存陣列，所以就改用輸出成json string，在每次載入時，解析json string。
這樣我以後就有一個簡單的local system 了。之後再將單字卡系統結合起來，連同匯入匯出功能。就完成了無資料庫系統的管理介面
<html>
<head>
<title>1000單每日計畫 - 新增</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="cards.js"></script>
</head>
<body>
<div class="container" id="Card">
<form class="mt-5 ml-5">
<div class="form-group col-md-4 clearfix">
<label for="Title">Title</label>
<input type="text" class="form-control" id="Title" v-model="Card.Title">
</div>
<div class="form-group col-md-4 clearfix">
<label for="Text">Text</label>
<input type="text" class="form-control" id="Text" v-model="Card.Text">
</div>
<div class="form-group col-md-8 clearfix">
<label for="Image">Image</label>
<input type="text" class="form-control" id="Image" v-model="Card.Image">
</div>
<button type="button" @click="Submit" class="btn btn-primary ml-3">Submit</button>
</form>
<h2>Cards Rows</h2>
<table class="table table-hover">
<thead>
<tr>
<th>Title</th>
<th>Text</th>
<th>Image</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(Item,index) in Cards">
<td>{{Item.Title}}</td>
<td>{{Item.Text}}</td>
<td ><div style="height:80px;overflow:hidden"><img :src="Item.Image" height="80px"/></div></td>
<td><button type="button" @click="DeleteItem(index)" class="btn btn-primary ml-3">刪除</button></td >
</tr>
</tbody>
</table>
</div>
</body>
</html>
<script>
localCards = [];
if(localStorage.Cards!=''){
localCards = JSON.parse(localStorage.Cards);
}
var app = new Vue({
el: '#Card',
data: {
Card:{
Image:'',
Title:'',
Text:'',
},
Result:'',
Cards:localCards
},
methods:{
Submit:function(){
var NewCard = {Title:app.Card.Title,Text:app.Card.Text,Image:app.Card.Image};
localCards.push(NewCard);
localStorage.Cards = JSON.stringify(localCards);
app.Card.Title='';
app.Card.Text='';
app.Card.Image='';
},
DeleteItem:function(index){
console.log('deleteItem'+index);
localCards.splice(index, 1);
localStorage.Cards = JSON.stringify(localCards);
}
}
});
</script>