# 完成「新增」、編輯商品項目 (1-5)
###### tags: `Vue`、`1. 快速入門 Vue.js `
2022.3.1
## 筆記
* 第一步 新增「新增」按鈕
```
<button type="button" class ="btn btn-primary"> 新增 </button>
```
* 第二步 在data中加入 isNew 布林，判斷是否要呈現表單。
```
data(){
return{
products:[],
temp:{},
isNew:false, //狀態決定，是否為新增產品
}
```
* 第三步 在表單上設定判斷,如果isNew等於ture，即表單呈現。
```
<form v-if="isNew">
```
* 第四步 在新增按鈕上增加v-on驅動函式，當按鈕點擊新增時顯示填寫表單。
```
<button type="button" class ="btn btn-primary" v-on:'click'="addIte"> 新增 </button>
//函式
addIten(){
this.isNew = true;
}
```
* 第五步 當按鈕點擊更新時，表單消失。
```
confirmEdit(){
if (!this.temp.id){
//新增資料
this.temp.id = new Date().getTime(); //新增流水號(為了與products格式一致)
this.temp.onStock = false; //(為了與products格式一致)
this.products.push(this.temp); //將temp(輸入資料)新增至product
this.temp = {}; //清空temp
}
else{
this.products.forEach((item,i) => {
if(item.id === this.temp.id){
this.products[i] = this.temp;
}
});
}
this.isNew = false
this.temp = {}
}
```
* 第六步 當點擊修改時，表單出現(判斷是否有id)。
```
<form v-if="isNew || temp.id">
```
## 全部程式碼
```
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<div class="text-end">
<button type="button" class="btn btn-primary" v-on:click="addItem">新增</button>
</div>
<!-- ##########################訂單呈現######################## -->
<table class="table">
<thead>
<tr>
<th>標題</th>
<th>圖片</th>
<th>銷售狀態</th>
<th>編輯</th>
</tr>
</thead>
<tbody>
<!-- :key 補上唯一值 -->
<tr v-for="item in products" :key="item.id" v-bind:class="{ 'table-success': item.onStock}">
<td>{{ item.name }}</td>
<td><img v-bind:src="item.imageUrl" alt="" width="100"></td>
<td><input type="checkbox" v-model="item.onStock"></td>
<td><button type="button" class="btn btn-outline-primary" v-on:click="editItem(item)">修改</button></td>
</tr>
</tbody>
</table>
<!-- ##################################################### -->
<!-- ##############新增、修改訂單 ############################-->
<form v-if="isNew || temp.id">
<div class="mb-3">
<label for="productName" class="form-label">產品名稱</label>
<input type="text" id="productName"
class="form-control"
v-model="temp.name"
>
</div>
<div class="mb-3">
<img :src="temp.imageUrl" class="img-fluid d-block" alt="" width="300">
<label for="productImage"
class="form-label">產品圖片</label>
<input type="text" id="productImage"
class="form-control"
v-model="temp.imageUrl"
>
</div>
<button type="button"
class="btn btn-secondary"
v-on:click="confirmEdit" >更新</button>
</form>
<!-- ##################################################### -->
</div>
<script>
const products = [{
id: '1',
imageUrl: 'https://images.unsplash.com/photo-1516906571665-49af58989c4e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=300&q=80',
name: 'MacBook Pro',
onStock: false,
},{
id: '2',
imageUrl: 'https://images.unsplash.com/photo-1512499617640-c74ae3a79d37?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
name: 'iPhone',
onStock: false,
}];
const App={
data(){
return{
products:[],
temp:{},
isNew:false, //狀態決定，是否為新增產品
}
},
methods:{
addItem(){
this.isNew = true;
this.temp = {};
},
editItem(item1){
this.temp = { ...item1 };
},
confirmEdit(){
if (!this.temp.id){
//新增資料
this.temp.id = new Date().getTime(); //新增流水號(為了與products格式一致)
this.temp.onStock = false; //(為了與products格式一致)
this.products.push(this.temp); //將temp(輸入資料)新增至product
this.temp = {}; //清空temp
}
else{
this.products.forEach((item,i) => {
if(item.id === this.temp.id){
this.products[i] = this.temp;
}
});
}
this.isNew = false
this.temp = {}
}
},
created(){
this.products = products; //引入product資料
}
}
Vue.createApp(App).mount("#app");
</script>
</body>
<link rel="stylesheet" href="/stylesheets/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</html>
```
Sign in with Wallet
Connect another wallet