You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/list.md
+48-48Lines changed: 48 additions & 48 deletions
Original file line number
Diff line number
Diff line change
@@ -1,8 +1,8 @@
1
-
# List Rendering
1
+
# リストレンダリング
2
2
3
-
## Mapping an Array to Elements with `v-for`
3
+
## v-for で配列に要素をマッピングする
4
4
5
-
We can use the `v-for`directive to render a list of items based on an array. The `v-for`directive requires a special syntax in the form of `item in items`, where`items`is the source data array and `item`is an **alias** for the array element being iterated on:
5
+
配列に基づいて、アイテムのリストを描画するために、`v-for`ディレクティブを使用することができます。 `v-for`ディレクティブには、 `item in items` の形式の特別な構文が必要で、`items`はソースデータの配列、 `item`は繰り返される配列要素の**エイリアス**です:
Inside `v-for`blocks we have full access to parent scope properties. `v-for`also supports an optional second argument for the index of the current item.
When iterating over an object, the order is based on the enumeration order of `Object.keys()`, which isn't guaranteed to be consistent across JavaScript engine implementations.
When Vue is updating a list of elements rendered with `v-for`, by default it uses an "in-place patch" strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index.
This default mode is efficient, but **only suitable when your list render output does not rely on child component state or temporary DOM state (e.g. form input values)**.
143
+
このデフォルトのモードは効率がいいです。しかしこれは、**描画されたリストが子コンポーネントの状態や、一時的な DOM の状態に依存していないときにだけ適しています (例: フォームのインプットの値)**。
144
144
145
-
To give Vue a hint so that it can track each node's identity, and thus reuse and reorder existing elements, you need to provide a unique `key`attribute for each item:
It is recommended to provide a `key` attribute with `v-for`whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.
153
+
繰り返される DOM の内容が単純な場合や、性能向上のためにデフォルトの動作に意図的に頼る場合を除いて、可能なときはいつでも `v-for`に `key` 属性を与えることが推奨されます。
154
154
155
-
Since it's a generic mechanism for Vue to identify nodes, the `key`also has other uses that are not specifically tied to `v-for`, as we will see later in the guide.
@@ -174,23 +174,23 @@ Vue wraps an observed array's mutation methods so they will also trigger view up
174
174
-`sort()`
175
175
-`reverse()`
176
176
177
-
You can open the console and play with the previous examples' `items`array by calling their mutation methods. For example: `example1.items.push({ message: 'Baz' })`.
Mutation methods, as the name suggests, mutate the original array they are called on. In comparison, there are also non-mutating methods, e.g. `filter()`, `concat()` and `slice()`, which do not mutate the original array but **always return a new array**. When working with non-mutating methods, you can replace the old array with the new one:
You might think this will cause Vue to throw away the existing DOM and re-render the entire list - luckily, that is not the case. Vue implements some smart heuristics to maximize DOM element reuse, so replacing an array with another array containing overlapping objects is a very efficient operation.
187
+
これにより、Vue が既存の DOM を破棄し、リスト全体を再描画すると思われるかもしれませんが、幸いなことにそうではありません。Vue は DOM 要素の再利用を最大化するためにいくつかのスマートなヒューリスティックを実装しているので、重複するオブジェクトを含んでいる別の配列で元の配列を置き換えることは、とても効率的な操作です。
188
188
189
-
## Displaying Filtered/Sorted Results
189
+
## フィルタ/ソートされた結果の表示
190
190
191
-
Sometimes we want to display a filtered or sorted version of an array without actually mutating or resetting the original data. In this case, you can create a computed property that returns the filtered or sorted array.
@@ -262,23 +262,23 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
262
262
</ul>
263
263
```
264
264
265
-
## `v-for`with`v-if`
265
+
## `v-for`と`v-if`
266
266
267
267
:::tip
268
-
Note that it's **not** recommended to use `v-if`and`v-for`together. Refer to [style guide](../style-guide/#avoid-v-if-with-v-for-essential)for details.
When they exist on the same node, `v-for`has a higher priority than `v-if`. That means the `v-if`will be run on each iteration of the loop separately. This can be useful when you want to render nodes for only _some_ items, like below:
The above only renders the todos that are not complete.
279
+
上記は、完了していない項目だけを描画します。
280
280
281
-
If instead, your intent is to conditionally skip execution of the loop, you can place the `v-if` on a wrapper element (or[`<template>`](conditional#conditional-groups-with-v-if-on-lt-template-gt)). For example:
You can directly use `v-for`on a custom component, like any normal element:
296
+
通常の要素のように、カスタムコンポーネントで直接 `v-for`を使うことができます:
297
297
298
298
```html
299
299
<my-componentv-for="item in items":key="item.id"></my-component>
300
300
```
301
301
302
-
However, this won't automatically pass any data to the component, because components have isolated scopes of their own. In order to pass the iterated data into the component, we should also use props:
@@ -310,9 +310,9 @@ However, this won't automatically pass any data to the component, because compon
310
310
></my-component>
311
311
```
312
312
313
-
The reason for not automatically injecting `item`into the component is because that makes the component tightly coupled to how `v-for`works. Being explicit about where its data comes from makes the component reusable in other situations.
0 commit comments