This repository was archived by the owner on May 25, 2024. It is now read-only.
File tree 1 file changed +0
-58
lines changed
1 file changed +0
-58
lines changed Original file line number Diff line number Diff line change @@ -475,61 +475,3 @@ body {
475
475
```
476
476
477
477
これで、商品を 1 つレンダリングできました。
478
-
479
- <PlusOne />
480
-
481
- ## 商品の内容を変更
482
-
483
- 商品の内容を変更し、表示に反映されることを確認してみましょう。商品名 ` name ` 、概要文 ` description ` 、価格 ` price ` をそれぞれ適当に変更します。
484
-
485
- 変更前(script)
486
-
487
- ``` vue
488
- <script setup lang="ts">
489
- import { ref } from 'vue'
490
-
491
- interface Item {
492
- id: number
493
- name: string
494
- description: string
495
- price: number
496
- image: string
497
- }
498
-
499
- const item = ref<Item>({
500
- id: 1,
501
- name: 'アボカドディップバケット',
502
- description:
503
- '刻んだ野菜をアボカドと混ぜてディップに。こんがり焼いたバゲットとお召し上がりください。',
504
- price: 480,
505
- image: '/images/item1.jpg'
506
- })
507
- </script>
508
- ```
509
-
510
- 変更後(script)
511
-
512
- ``` vue
513
- <script setup lang="ts">
514
- import { ref } from 'vue'
515
-
516
- interface Item {
517
- id: number
518
- name: string
519
- description: string
520
- price: number
521
- image: string
522
- }
523
-
524
- const item = ref<Item>({
525
- id: 1,
526
- name: 'アボカドソースバケット',
527
- description:
528
- '刻んだ野菜をアボカドと混ぜ、優しい味のソースに。こんがり焼いたバゲットとお召し上がりください。',
529
- price: 320,
530
- image: '/images/item1.jpg'
531
- })
532
- </script>
533
- ```
534
-
535
- このようにデータを更新したとき、自動的に表示が更新される状態のことを、「リアクティブ」と言います。
You can’t perform that action at this time.
0 commit comments