Comment obtenir l'objet ligne sous le formulaire en vue (deux méthodes)

Dans Vue, nous utilisons la directive v-for pour parcourir la liste de rendu. Que devons-nous faire si nous avons besoin d'obtenir les données d'une ligne sélectionnée dans le formulaire ? Dans cet article, je présenterai en détail comment utiliser la directive v-for et la liaison d'événement de Vue pour obtenir des objets de ligne sous le formulaire.

1. v-for instruction

Regardons d'abord l'utilisation de v-for instruction. Grâce à l'instruction v-for, nous pouvons restituer les données dans la page en boucle pour former une liste. Sa syntaxe est la suivante :

<ul>
  <li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>

Dans le code ci-dessus, nous utilisons l'instruction v-for pour parcourir chaque élément du tableau liste. Chaque élément sera rendu comme un élément dans la liste, où item représente chaque élément du tableau et index représente l'index de l'élément dans le tableau.

2. Récupérer l'objet ligne sous le formulaire

Dans le formulaire, nous avons souvent besoin d'obtenir les données d'une ligne sélectionnée. Afin de réaliser cette fonction, nous pouvons obtenir les objets ligne sous la forme via les deux méthodes suivantes.

1. Liaison d'événement

La liaison d'événement est une méthode courante pour obtenir des objets de ligne dans le formulaire. Lorsque l'utilisateur clique sur une certaine ligne du formulaire, l'événement correspondant sera déclenché. Nous pouvons capturer et traiter l'événement via la liaison d'événement.

Par exemple, nous pouvons lier un événement de clic à chaque ligne du tableau. Lorsque l'utilisateur clique sur une ligne, l'événement sera déclenché. Le code est le suivant :

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in list" :key="index" @click="handleClick(index)">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '小明', age: 18, gender: '男' },
        { name: '小红', age: 20, gender: '女' },
        { name: '小刚', age: 22, gender: '男' }
      ]
    }
  },
  methods: {
    handleClick(index) {
      console.log(this.list[index])
    }
  }
}
</script>

Dans le code ci-dessus, nous avons lié l'événement click dans la directive v-for Lorsque l'utilisateur clique sur une certaine ligne, la méthode handleClick sera déclenchée. Dans cette méthode, nous pouvons obtenir l'objet ligne en fonction de l'index de la ligne cliquée et effectuer les opérations correspondantes. Par exemple, dans le code ci-dessus, nous affichons le contenu de l'objet ligne sélectionné via console.log.

2. Obtenez l'objet ligne sélectionné

En plus de la liaison d'événement, Vue fournit également une méthode intégrée pour obtenir l'objet ligne sélectionné. Nous pouvons lier un attribut ref à chaque ligne, puis obtenir l'objet de ligne sélectionné via cet attribut.

Par exemple, nous pouvons lier l'attribut ref sur une certaine ligne, comme indiqué ci-dessous :

<tr v-for="(item, index) in list" :key="index" ref="row">
  <td>{{ item.name }}</td>
  <td>{{ item.age }}</td>
  <td>{{ item.gender }}</td>
</tr>

Dans le code ci-dessus, nous enregistrons la référence de chaque ligne dans un tableau via l'instruction ref. Ensuite, lorsque nous devons obtenir l'objet ligne sélectionné, nous pouvons obtenir l'objet ligne correspondant en obtenant l'index de la ligne sélectionnée dans le tableau.

Par exemple, nous pouvons obtenir l'objet ligne sélectionné dans l'événement clic du bouton, comme indiqué ci-dessous :

<template>
  <table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in list" :key="index" ref="row">
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>{{ item.gender }}</td>
      </tr>
    </tbody>
  </table>
  <button @click="handleClick">获取选中行的内容</button>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '小明', age: 18, gender: '男' },
        { name: '小红', age: 20, gender: '女' },
        { name: '小刚', age: 22, gender: '男' }
      ]
    }
  },
  methods: {
    handleClick() {
      const selectedRowIndex = 1 // 假设我们选中了第2行
      const selectedRow = this.$refs.row[selectedRowIndex]
      console.log(selectedRow)
    }
  }
}
</script>

Dans le code ci-dessus, nous obtenons l'objet ligne sélectionné dans l'événement clic du bouton et l'envoyons à la console.

Résumé :

Les deux méthodes ci-dessus peuvent nous aider à obtenir les objets de ligne dans le formulaire. La sélection de la méthode spécifique doit être basée sur différentes situations. Il convient de noter que lors du rendu d'un formulaire via une boucle d'instructions v-for, chaque ligne doit avoir une valeur de clé unique comme valeur de l'attribut clé pour améliorer les performances et éviter les problèmes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!