Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Japanese translation (Template Directives section)
- Loading branch information
Showing
6 changed files
with
125 additions
and
125 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,48 +1,48 @@ | ||
--- | ||
title: v-bind Merge Behavior | ||
title: v-bind のマージ動作 | ||
badges: | ||
- breaking | ||
--- | ||
|
||
# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" /> | ||
|
||
## Overview | ||
## 概要 | ||
|
||
- **BREAKING**: Order of bindings for v-bind will affect the rendering result. | ||
- **破壊的変更**: v-bind のバインディングの順番は、レンダリング結果に影響します。 | ||
|
||
## Introduction | ||
## はじめに | ||
|
||
When dynamically binding attributes on an element, a common scenario involves using both the `v-bind="object"` syntax as well as individual attributes in the same element. However, this raises questions as far as the priority of merging. | ||
要素に属性を動的にバインドする場合、同じ要素で `v-bind="object"` 構文と個別の属性の両方を使用するのが一般的です。しかし、この場合、マージの優先順位に問題が生じます。 | ||
|
||
## 2.x Syntax | ||
## 2.x の構文 | ||
|
||
In 2.x, if an element has both `v-bind="object"` and an identical individual attribute defined, the individual attribute would always overwrite bindings in the `object`. | ||
2.x では、要素に `v-bind="object"` と個別の属性が定義されている場合、個別の属性は常に `object` のバインドを上書きしていました。 | ||
|
||
```html | ||
<!-- template --> | ||
<!-- テンプレート --> | ||
<div id="red" v-bind="{ id: 'blue' }"></div> | ||
<!-- result --> | ||
<!-- 結果 --> | ||
<div id="red"></div> | ||
``` | ||
|
||
## 3.x Syntax | ||
## 3.x の構文 | ||
|
||
In 3x, if an element has both `v-bind="object"` and an identical individual attribute defined, the order of how the bindings are declared determines how they are merged. In other words, rather than assuming developers want the individual attribute to always override what is defined in the `object`, developers now have more control over the desired merging behavior. | ||
3x では、要素に `v-bind="object"` と個別の属性が定義されている場合、バインディングが宣言されている順序によって、それらがどのようにマージされるかが決まります。つまり、`object` で定義されたものを個別の属性が常にオーバーライドすることを開発者が望んでいると想定するのではなく、必要とするマージ動作をより詳細にコントロールできるようになったのです。 | ||
|
||
```html | ||
<!-- template --> | ||
<!-- テンプレート --> | ||
<div id="red" v-bind="{ id: 'blue' }"></div> | ||
<!-- result --> | ||
<!-- 結果 --> | ||
<div id="blue"></div> | ||
|
||
<!-- template --> | ||
<!-- テンプレート --> | ||
<div v-bind="{ id: 'blue' }" id="red"></div> | ||
<!-- result --> | ||
<!-- 結果 --> | ||
<div id="red"></div> | ||
``` | ||
|
||
## Migration Strategy | ||
## 移行手順 | ||
|
||
If you are relying on this override functionality for `v-bind`, we currently recommend ensuring that your `v-bind` attribute is defined before individual attributes. | ||
この `v-bind` のオーバーライド機能を利用している場合は、`v-bind` 属性が個別の属性より先に定義されているか確認することをお勧めします。 | ||
|
||
[Migration build flag: `COMPILER_V_BIND_OBJECT_ORDER`](../migration-build.html#compat-configuration) | ||
[移行ビルドのフラグ: `COMPILER_V_BIND_OBJECT_ORDER`](../migration-build.html#compat-configuration) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,36 +1,36 @@ | ||
--- | ||
title: v-if vs. v-for Precedence | ||
title: v-if と v-for の優先順位 | ||
badges: | ||
- breaking | ||
--- | ||
|
||
# {{ $frontmatter.title }} <MigrationBadges :badges="$frontmatter.badges" /> | ||
|
||
## Overview | ||
## 概要 | ||
|
||
- **BREAKING**: If used on the same element, `v-if` will have higher precedence than `v-for` | ||
- **破壊的変更**: 同じ要素で使用した場合、`v-if` は `v-for` より優先度が高くなります | ||
|
||
## Introduction | ||
## はじめに | ||
|
||
Two of the most commonly used directives in Vue.js are `v-if` and `v-for`. So it's no surprise that there comes a time when developers want to use both together. While this is not a recommended practice, there may be times when this is necessary, so we wanted to provide guidance for how it works. | ||
Vue.js で最もよく使われるディレクティブは `v-if` と `v-for` の 2 つです。そのため、開発者がこの 2 つを一緒に使いたいと思うことがあっても不思議ではありません。これは推奨される方法ではありませんが、必要な場合もあるため、その仕組についてのガイダンスを提供したいと考えています。 | ||
|
||
## 2.x Syntax | ||
## 2.x の構文 | ||
|
||
In 2.x, when using `v-if` and `v-for` on the same element, `v-for` would take precedence. | ||
2.x では、同じ要素に対して `v-if` と `v-for` を使用した場合、`v-for` が優先されました。 | ||
|
||
## 3.x Syntax | ||
## 3.x の構文 | ||
|
||
In 3.x, `v-if` will always have the higher precedence than `v-for`. | ||
3.x では、`v-if` は常に `v-for` より優先度が高くなります。 | ||
|
||
## Migration Strategy | ||
## 移行手順 | ||
|
||
It is recommended to avoid using both on the same element due to the syntax ambiguity. | ||
構文があいまいなため、同じ要素で両方を使用することは避けることをお勧めします。 | ||
|
||
Rather than managing this at the template level, one method for accomplishing this is to create a computed property that filters out a list for the visible elements. | ||
これをテンプレートレベルで管理するのではなく、表示する要素のリストをフィルタリングする算出プロパティを作成することで実現する方法があります。 | ||
|
||
[Migration build flag: `COMPILER_V_IF_V_FOR_PRECEDENCE`](../migration-build.html#compat-configuration) | ||
[移行ビルドのフラグ: `COMPILER_V_IF_V_FOR_PRECEDENCE`](../migration-build.html#compat-configuration) | ||
|
||
## See also | ||
## 参照 | ||
|
||
- [List Rendering - Displaying Filtered/Sorted Results](https://ja.vuejs.org/guide/essentials/list.html#displaying-filtered-sorted-results) | ||
- [List Rendering - `v-for` with `v-if`](https://ja.vuejs.org/guide/essentials/list.html#v-for-with-v-if) | ||
- [移行ビルドのフラグ - フィルタリング/並べ替えの結果を表示する](https://ja.vuejs.org/guide/essentials/list.html#displaying-filtered-sorted-results) | ||
- [移行ビルドのフラグ - `v-for` と `v-if`](https://ja.vuejs.org/guide/essentials/list.html#v-for-with-v-if) |
Oops, something went wrong.