---
# System prepended metadata

title: 編輯你的資料狀態 (1-4)
tags: ['1. 快速入門 Vue.js ', Vue]

---

# 編輯你的資料狀態 (1-4)
###### tags: `Vue`、`1. 快速入門 Vue.js `

第一步 將預編輯資料傳給函式 `v-on:click="editItem(item)"`
第二步 使用淺層拷貝，避免參照。
第三步 區分更新按鈕，新增資料與修改資料程式差異，
`if (!this.item.id)` 判斷有無id
第四步 使用forEach找尋product中對應資並給予修改。

```
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>

<div id="app">
  

    <!-- ##########################訂單呈現######################## -->
    <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>
        <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:{
                name:'Oldmoon',
                imageUrl:'https://images.unsplash.com/photo-1602526430780-782d6b1783fa?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'
            }
        }
    },
    methods:{
        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.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>
```