1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<div id="app">
  <form>
    <label>產品名稱</label>
    <input type="text" v-model="temp.name">
    <br>
    <label>產品圖片</label>
    <input type="text" v-model="temp.imgUrl">
    <br>
    <button type="button" @click="updateFile">更新</button>
  </form>
  <table border>
    <tr>
      <th>標題</th>
      <th>圖片</th>
      <th>銷售狀態</th>
      <th>編輯</th>
    </tr>
    <tr v-for="item in products" :key="item.id">
      <td>{{ item.name }}</td>
      <td>
        <img :src="item.imgUrl" width=100 alt="">
      </td>
      <td>
        <input type="checkbox" v-model="item.onStock">  
      </td>
      <td>
        <button type="button" @click="editItem(item)">修改</button>
      </td>
    </tr>
  </table>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

const products = [{
  id: '1',
  imgUrl: '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',
  imgUrl: '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{
      //顯示在table上的資料
      products: [],
      //在輸入框，要被編修的資料
      temp: {
        name: "",
        imgUrl: ""
      }
    }
  },
  methods:{
    //點擊修改時，將資料放入輸入框，但如果是this.temp = item，編修時會因為物件傳參考特性，table資料也會被更改
    editItem(item){
      //淺層拷貝
      this.temp = { ...item };
    },
    //點擊更新：需要判斷是在“修改”，還是在“新增”，判斷方式為“是否已存在id”，已存在products裡的資料，都是附有id值
    updateFile(){
      //如果沒有id，表示要新增資料
      if(!this.temp.id){
        //快速產生id的方法
        this.temp.id = new Date().getTime();
        this.temp.onStock = false;
        //將輸入框裡的值，新增到products裡
        this.products.push(this.temp);
      //如果有id，表示要修改資料
      }else{
        //先比對要修改products裡的哪一筆資料
        this.products.forEach((item,i)=>{
          //如果id完全相符
          if(item.id === this.temp.id){
            //就將那筆資料賦予新的值
            this.products[i] = this.temp;
          }
        })
        this.temp = "";
      }
    }
  },
  //此段表示成功介接api資料到data
  created(){
    this.products = products;
  }
}

Vue.createApp(app).mount("#app");