Skip to content
This repository has been archived by the owner on May 25, 2024. It is now read-only.

Commit

Permalink
fix: remove reactivity incorrect explaination (#266)
Browse files Browse the repository at this point in the history
  • Loading branch information
ubugeeei authored Apr 28, 2024
1 parent 1c0613e commit 79a1e95
Showing 1 changed file with 0 additions and 58 deletions.
58 changes: 0 additions & 58 deletions packages/docs/src/rendering.md
Original file line number Diff line number Diff line change
Expand Up @@ -475,61 +475,3 @@ body {
```

これで、商品を 1 つレンダリングできました。

<PlusOne />

## 商品の内容を変更

商品の内容を変更し、表示に反映されることを確認してみましょう。商品名 `name`、概要文 `description`、価格 `price` をそれぞれ適当に変更します。

変更前(script)

```vue
<script setup lang="ts">
import { ref } from 'vue'
interface Item {
id: number
name: string
description: string
price: number
image: string
}
const item = ref<Item>({
id: 1,
name: 'アボカドディップバケット',
description:
'刻んだ野菜をアボカドと混ぜてディップに。こんがり焼いたバゲットとお召し上がりください。',
price: 480,
image: '/images/item1.jpg'
})
</script>
```

変更後(script)

```vue
<script setup lang="ts">
import { ref } from 'vue'
interface Item {
id: number
name: string
description: string
price: number
image: string
}
const item = ref<Item>({
id: 1,
name: 'アボカドソースバケット',
description:
'刻んだ野菜をアボカドと混ぜ、優しい味のソースに。こんがり焼いたバゲットとお召し上がりください。',
price: 320,
image: '/images/item1.jpg'
})
</script>
```

このようにデータを更新したとき、自動的に表示が更新される状態のことを、「リアクティブ」と言います。

0 comments on commit 79a1e95

Please sign in to comment.