So erhalten Sie das Zeilenobjekt im Formular in Vue (zwei Methoden)

In Vue verwenden wir die v-for-Direktive, um die Rendering-Liste zu durchlaufen. Was sollen wir tun, wenn wir die Daten einer ausgewählten Zeile im Formular abrufen müssen? In diesem Artikel werde ich im Detail vorstellen, wie man die v-for-Direktive und die Ereignisbindung von Vue verwendet, um Zeilenobjekte im Formular abzurufen.

1. v-for-Anweisung

Sehen wir uns zunächst die Verwendung von v-for-Anweisung an. Mit der v-for-Anweisung können wir die Daten in einer Schleife auf der Seite rendern, um eine Liste zu bilden. Seine Syntax lautet wie folgt:

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

Im obigen Code verwenden wir die v-for-Anweisung, um jedes Element im Listenarray zu durchlaufen. Jedes Element wird als Element in der Liste gerendert, wobei „item“ jedes Element im Array darstellt und „index“ den Index des Elements im Array darstellt.

2. Holen Sie sich das Zeilenobjekt im Formular

Im Formular müssen wir oft die Daten einer ausgewählten Zeile abrufen. Um diese Funktion zu erreichen, können wir die Zeilenobjekte im Formular mit den folgenden zwei Methoden abrufen.

1. Ereignisbindung

Ereignisbindung ist eine gängige Methode zum Abrufen von Zeilenobjekten im Formular. Wenn der Benutzer auf eine bestimmte Zeile im Formular klickt, wird das entsprechende Ereignis ausgelöst. Wir können das Ereignis durch Ereignisbindung erfassen und verarbeiten.

Zum Beispiel können wir ein Klickereignis an jede Zeile in der Tabelle binden. Wenn der Benutzer auf eine Zeile klickt, wird das Ereignis ausgelöst. Der Code lautet wie folgt:

<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>

Im obigen Code haben wir das Click-Ereignis in der v-for-Direktive gebunden. Wenn der Benutzer auf eine bestimmte Zeile klickt, wird die handleClick-Methode ausgelöst. Bei dieser Methode können wir das Zeilenobjekt basierend auf dem Index der angeklickten Zeile abrufen und entsprechende Vorgänge ausführen. Im obigen Code geben wir beispielsweise den Inhalt des ausgewählten Zeilenobjekts über console.log aus.

2. Holen Sie sich das ausgewählte Zeilenobjekt

Zusätzlich zur Ereignisbindung bietet Vue auch eine integrierte Methode zum Abrufen des ausgewählten Zeilenobjekts. Wir können an jede Zeile ein Ref-Attribut binden und dann über dieses Attribut das ausgewählte Zeilenobjekt abrufen.

Zum Beispiel können wir das ref-Attribut an eine bestimmte Zeile binden, wie unten gezeigt:

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

Im obigen Code speichern wir die Referenz jeder Zeile über die ref-Anweisung in einem Array. Wenn wir als nächstes das ausgewählte Zeilenobjekt abrufen müssen, können wir das entsprechende Zeilenobjekt erhalten, indem wir den Index der ausgewählten Zeile im Array abrufen.

Zum Beispiel können wir das ausgewählte Zeilenobjekt im Klickereignis der Schaltfläche abrufen, wie unten gezeigt:

<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>

Im obigen Code erhalten wir das ausgewählte Zeilenobjekt im Klickereignis der Schaltfläche und geben es an die Konsole aus.

Zusammenfassung:

Die beiden oben genannten Methoden können uns helfen, die Zeilenobjekte im Formular zu erhalten. Die spezifische Methodenauswahl sollte auf unterschiedlichen Situationen basieren. Es ist zu beachten, dass beim Rendern eines Formulars über eine V-for-Anweisungsschleife jede Zeile einen eindeutigen Schlüsselwert als Wert des Schlüsselattributs haben sollte, um die Leistung zu verbessern und Probleme zu vermeiden.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie das Zeilenobjekt im Formular in Vue (zwei Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!