Traduction list.md

src/v2/guide/list.md

@@ -1,14 +1,14 @@
 ---
-title: List Rendering
+title: Rendu de liste
 type: guide
 order: 8
 ---
 
 ## `v-for`
 
-<p class="tip">**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**</p>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:
+Nous pouvons utiliser la directive `v-for` pour faire le rendu d'une liste d'éléments au sein d'un tableau de données. La directive `v-for` utilise une syntaxe spécifique de la forme `item in items`, où `items` représente la source de donnée du tableau et où `item` est un **alias** représentant l'élément du tableau en cours d'itération :
 
-### Basic Usage
+### Utilisation simple
 
 ``` html
 <ul id="example-1">
@@ -30,7 +30,7 @@ var example1 = new Vue({
 })
 ```
 
-Result:
+Résultat :
 
 {% raw %}
 <ul id="example-1" class="demo">
@@ -56,7 +56,7 @@ var example1 = new Vue({
 </script>
 {% endraw %}
 
-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.
+À l'intérieur des structures `v-for`, nous avons un accès complet aux propriétés de la portée parente. `v-for` supporte également un second argument optionnel représentant l'index de l'élément courant.
 
 ``` html
 <ul id="example-2">
@@ -106,15 +106,15 @@ var example2 = new Vue({
 </script>
 {% endraw %}
 
-You can also use `of` as the delimiter instead of `in`, so that it is closer to JavaScript's syntax for iterators:
+Vous pouvez également utiliser `of` en tant que mot clé à la place de `in` pour être plus proche de la syntaxe JavaScript concernant l'utilisation des itérateurs :
 
 ``` html
 <div v-for="item of items"></div>
 ```
 
 ### Template `v-for`
 
-Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to render a block of multiple elements. For example:
+De la même manière qu'avec le template `v-if`, vous pouvez également utiliser la balise `<template>` avec `v-for` pour faire le rendu d'une structure contenant de multiples éléments. Par exemple :
 
 ``` html
 <ul>
@@ -125,9 +125,9 @@ Similar to template `v-if`, you can also use a `<template>` tag with `v-for` to
 </ul>
 ```
 
-### Object `v-for`
+### `v-for` avec l'objet
 
-You can also use `v-for` to iterate through the properties of an object.
+Vous pouvez aussi utiliser `v-for` pour itérer sur les propriétés d'un objet.
 
 ``` html
 <ul id="repeat-object" class="demo">
@@ -172,35 +172,35 @@ new Vue({
 </script>
 {% endraw %}
 
-You can also provide a second argument for the key:
+Vous pouvez également fournir un deuxième argument représentant la clé de la propriété courante :
 
 ``` html
 <div v-for="(value, key) in object">
   {{ key }} : {{ value }}
 </div>
 ```
 
-And another for the index:
+Et également un troisième pour l'index :
 
 ``` html
 <div v-for="(value, key, index) in object">
   {{ index }}. {{ key }} : {{ value }}
 </div>
 ```
 
-<p class="tip">When iterating over an object, the order is based on the key enumeration order of `Object.keys()`, which is **not** guaranteed to be consistent across JavaScript engine implementations.</p>
+<p class="tip">Quand vous itérez sur un objet, l'ordre est basé sur l'ordre d'énumération de `Object.keys()` et il **n'**y a **aucune** garantie de consistance à travers toutes les implémentations des moteurs JavaScript.</p>
 
-### Range `v-for`
+### `v-for` et nombres
 
-`v-for` can also take an integer. In this case it will repeat the template that many times.
+`v-for` peut également prendre un nombre. Dans ce cas, il répétera le template autant de fois qu'indiqué.
 
 ``` html
 <div>
   <span v-for="n in 10">{{ n }}</span>
 </div>
 ```
 
-Result:
+Résultat :
 
 {% raw %}
 <div id="range" class="demo">
@@ -211,17 +211,17 @@ new Vue({ el: '#range' })
 </script>
 {% endraw %}
 
-### Components and `v-for`
+### Composants et `v-for`
 
-> This section assumes knowledge of [Components](components.html). Feel free to skip it and come back later.
+> Cette partie suppose que vous ayez pris connaissance du contenu de [Composants](components.html). Vous pouvez la passer pour le moment et y revenir plus tard.
 
-You can directly use `v-for` on a custom component, like any normal element:
+Vous pouvez directement utiliser `v-for` sur un composant personnalisé, comme sur n'importe quel autre élément standard :
 
 ``` html
 <my-component v-for="item in items"></my-component>
 ```
 
-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:
+Cependant, cela ne passera pas automatiquement les données au composant, et cela car les composants ont leurs propres portées isolées. Dans l'optique de passer les données itérées au composant, nous devons utiliser les props conjointement :
 
 ``` html
 <my-component
@@ -231,9 +231,9 @@ However, this won't automatically pass any data to the component, because compon
 </my-component>
 ```
 
-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.
+La raison pour ne pas injecter automatiquement `item` dans le composant est que : cela forcerait le composant à être fortement couplé avec l'utilisation de `v-for`. En étant explicite sur la manière dont les données sont injectées nous permettons au composant d'être réutilisable dans d'autres situations.
 
-Here's a complete example of a simple todo list:
+Voici un exemple complet d'une simple liste de tâches :
 
 ``` html
 <div id="todo-list-example">
@@ -269,9 +269,9 @@ new Vue({
   data: {
     newTodoText: '',
     todos: [
-      'Do the dishes',
-      'Take out the trash',
-      'Mow the lawn'
+      'Faire la vaisselle',
+      'Sortir les poubelles',
+      'Tondre la pelouse'
     ]
   },
   methods: {
@@ -286,7 +286,7 @@ new Vue({
 {% raw %}
 <div id="todo-list-example" class="demo">
   <input
-    v-model="newTodoText" v
+    v-model="newTodoText"
     v-on:keyup.enter="addNewTodo"
     placeholder="Add a todo"
   >
@@ -314,9 +314,9 @@ new Vue({
   data: {
     newTodoText: '',
     todos: [
-      'Do the dishes',
-      'Take out the trash',
-      'Mow the lawn'
+      'Faire la vaisselle',
+      'Sortir les poubelles',
+      'Tondre la pelouse'
     ]
   },
   methods: {
@@ -329,19 +329,19 @@ new Vue({
 </script>
 {% endraw %}
 
-### `v-for` with `v-if`
+### `v-for` avec `v-if`
 
-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 is very useful when you want to render nodes for only _some_ items, like below:
+Quand ils existent sur le même nœud, `v-for` a une priorité plus élevé que `v-if`. Cela signifie que `v-if` va être exécuté indépendamment sur chaque tour de boucle. Cela est vraiment utile quand vous voulez faire le rendu d'un nœud seulement pour _quelques_ éléments comme ci-dessous :
 
 ``` html
 <li v-for="todo in todos" v-if="!todo.isComplete">
   {{ todo }}
 </li>
 ```
 
-The above only renders the todos that are not complete.
+La partie ci-dessus fait uniquement le rendu des tâches qui ne sont pas achevées.
 
-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.html#Conditional-Groups-with-v-if-on-lt-template-gt)). For example:
+Si au lieu de cela, vous voulez passer conditionnellement l'exécution de la boucle, vous pouvez placer le `v-if` sur l'élément parent (ou sur [`<template>`](conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt)). Par exemple :
 
 ``` html
 <ul v-if="shouldRenderTodos">
@@ -353,27 +353,27 @@ If instead, your intent is to conditionally skip execution of the loop, you can
 
 ## `key`
 
-When Vue is updating a list of elements rendered with `v-for`, it by default 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 simply patch each element in-place and make sure it reflects what should be rendered at that particular index. This is similar to the behavior of `track-by="$index"` in Vue 1.x.
+Quand Vue met à jour une liste d'éléments rendus avec `v-for`, il utilise par défaut une stratégie de « in-place patch ». Si l'ordre des éléments de données a changé, plutôt que de déplacer les éléments du DOM pour concorder avec le nouvel ordre des éléments, Vue va simplement changer chaque élément en place et s'assurer que cela reflète ce qui aurait dû être rendu à cet index en particulier. Cela est un comportement similaire au `track-by="$index"` de Vue 1.x.
 
-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)**.
+Ce mode par défaut est performant, mais seulement envisageable **quand votre liste de rendu ne s'appuie pas sur l'état d'un composant enfant ou d'un état temporaire du DOM (ex. : les valeurs de champs d'un formulaire)**.
 
-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. An ideal value for `key` would be the unique id of each item. This special attribute is a rough equivalent to `track-by` in 1.x, but it works like an attribute, so you need to use `v-bind` to bind it to dynamic values (using shorthand here):
+Pour donner à Vue un indice pour permettre à chaque nœud d'être correctement identifié et suivi afin que les élément existant puissent être réutilisés et réordonnés, vous devez fournir une `key` (clé) d'attribut unique pour chaque élément. Une valeur idéale pour `key` serait l'identifiant `id` unique de chaque élément. Cet attribut spécial est en gros l'équivalent du `track-by` de la 1.x, mais il fonctionne comme un attribut, donc vous avez besoin d'utiliser `v-bind` pour le lier aux valeurs dynamiques (un exemple avec l'abréviation de `v-bind`) :
 
 ``` html
 <div v-for="item in items" :key="item.id">
-  <!-- content -->
+  <!-- contenu -->
 </div>
 ```
 
-It is recommended to provide a `key` with `v-for` whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.
+Il est recommandé de fournir une `key` avec `v-for` autant que possible, à moins que le contenu itéré du DOM soit simple ou que vous utilisiez intentionnellement le comportement de base pour un gain de performance.
 
-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.
+Comme c'est un mécanisme générique pour Vue permettant d’identifier les nœuds, la `key` a également d'autres usages et ne se limite pas seulement à sont utilisation avec `v-for`, comme nous le verrons plus tard dans le guide.
 
-## Array Change Detection
+## Détection de changement dans un tableau
 
-### Mutation Methods
+### Méthodes transformantes
 
-Vue wraps an observed array's mutation methods so they will also trigger view updates. The wrapped methods are:
+Vue surcharge ses tableaux observés avec des méthodes transformantes qui vont également déclencher des mises à jour de vue. Les méthodes additionnelles sont :
 
 - `push()`
 - `pop()`
@@ -383,28 +383,28 @@ Vue wraps an observed array's mutation methods so they will also trigger view up
 - `sort()`
 - `reverse()`
 
-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' })`.
+Vous pouvez ouvrir la console et jouer avec les `items` (éléments) de tableau des exemples précédents en appelant leurs méthodes transformantes. Par exemple : `example1.items.push({ message: 'Baz' })`.
 
-### Replacing an Array
+### Remplacer un tableau
 
-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 just replace the old array with the new one:
+Les méthodes transformantes, comme le nom le suggère, transforment le tableau original sur lesquelles elles sont appelées. En comparaison, il y a aussi des méthodes non transformantes, ex. : `filter()`, `concat()` et `slice()`, qui ne transforment pas le tableau original mais **retourne toujours un nouveau tableau**. Quand vous travaillez avec des méthodes non transformantes, vous pouvez juste remplacer l'ancien tableau par le nouveau :
 
 ``` js
 example1.items = example1.items.filter(function (item) {
   return item.message.match(/Foo/)
 })
 ```
 
-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.
+Vous pouvez penser que cela va forcer Vue à jeter le DOM existant et à faire le rendu de nouveau sur la liste entière ? Par chance, cela n'est pas le cas. Vue implémente plusieurs fonctions heuristiques intelligentes pour optimiser la réutilisation du DOM existant ; ainsi remplacer un tableau par un autre contenant des objets supplémentaires est une opération vraiment efficace.
 
-### Caveats
+### Exceptions
 
-Due to limitations in JavaScript, Vue **cannot** detect the following changes to an array:
+A cause de limitations de JavaScript, Vue **ne peut pas** détecter les changements suivants dans un tableau :
 
-1. When you directly set an item with the index, e.g. `vm.items[indexOfItem] = newValue`
-2. When you modify the length of the array, e.g. `vm.items.length = newLength`
+1. Quand vous affectez directement un élément à un index. Ex. : `vm.items[indexOfItem] = newValue`
+2. Quand vous modifiez la longeur du tableau. Ex. : `vm.items.length = newLength`
 
-To overcome caveat 1, both of the following will accomplish the same as `vm.items[indexOfItem] = newValue`, but will also trigger state updates in the reactivity system:
+Pour contourner la première exception, les deux exemples suivant accomplissent la même chose que `vm.items[indexOfItem] = newValue`, mais vont également déclencher des mises à jour d'états dans le système réactif :
 
 ``` js
 // Vue.set
@@ -415,17 +415,17 @@ Vue.set(example1.items, indexOfItem, newValue)
 example1.items.splice(indexOfItem, 1, newValue)
 ```
 
-To deal with caveat 2, you can also use `splice`:
+Pour régler la seconde exception, vous pouvez également utiliser `splice` :
 
 ``` js
 example1.items.splice(newLength)
 ```
 
-## Displaying Filtered/Sorted Results
+## Affichage de résultats filtrés/triés
 
-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.
+Parfois nous voulons afficher une version filtrée ou triée d'un tableau sans pour autant transformer ou effacer les données originales. Dans ce cas, vous pouvez créer une propriété calculée qui retourne le tableau filtré ou trié.
 
-For example:
+Par exemple :
 
 ``` html
 <li v-for="n in evenNumbers">{{ n }}</li>
@@ -444,7 +444,7 @@ computed: {
 }
 ```
 
-Alternatively, you can also just use a method where computed properties are not feasible (e.g. inside nested `v-for` loops):
+Alternativement, vous pouvez aussi simplement utiliser une méthode là où les propriétés calculées ne sont pas utilisables (ex. : à l'intérieur d'une boucle `v-for` imbriquée):
 
 ``` html
 <li v-for="n in even(numbers)">{{ n }}</li>