vueのフォーム内の行オブジェクトを取得する方法（2つの方法）

Vue では、v-for 命令を使用してレンダリング リストをループします。フォームで選択した行のデータを取得する必要がある場合はどうすればよいでしょうか?この記事では、Vueのv-forディレクティブとイベントバインディングを使ってフォーム内の行オブジェクトを取得する方法を詳しく紹介します。

1. v-for 命令

まず、v-for 命令の使用方法を見てみましょう。 v-for 命令を使用すると、ループ内のページにデータをレンダリングしてリストを形成できます。その構文は次のとおりです。

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

上記のコードでは、v-for 命令を使用して、リスト配列内の各要素をループします。各要素はリスト内の項目として表示されます。項目は配列内の各要素を表し、インデックスは配列内の要素のインデックスを表します。

2. フォーム内の行オブジェクトを取得する

フォームでは、選択した行のデータを取得する必要があることがよくあります。この機能を実現するには、次の 2 つの方法でフォーム内の行オブジェクトを取得します。

1. イベント バインディング

イベント バインディングは、フォーム内の行オブジェクトを取得するための一般的な方法です。ユーザーがフォーム内の特定の行をクリックすると、対応するイベントがトリガーされ、イベント バインディングを通じてイベントをキャプチャして処理できます。

たとえば、クリック イベントをテーブル内の各行にバインドできます。ユーザーが行をクリックすると、イベントがトリガーされます。コードは次のとおりです:

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

上記のコードでは、v-for ディレクティブでクリック イベントをバインドします。ユーザーが特定の行をクリックすると、handleClick メソッドがトリガーされます。このメソッドでは、クリックされた行のインデックスに基づいて行オブジェクトを取得し、対応する操作を実行できます。たとえば、上記のコードでは、選択した行オブジェクトの内容を console.log を通じて出力します。

2. 選択された行オブジェクトを取得する

イベント バインディングに加えて、Vue は選択された行オブジェクトを取得するための組み込みメソッドも提供します。 ref 属性を各行にバインドし、この属性を通じて選択された行オブジェクトを取得できます。

たとえば、以下に示すように、ref 属性を特定の行にバインドできます。

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

上記のコードでは、ref 命令を通じて各行の参照を配列に保存します。 。次に、選択した行オブジェクトを取得する必要がある場合、配列内の選択した行のインデックスを取得することで、対応する行オブジェクトを取得できます。

たとえば、以下に示すように、ボタンのクリック イベントで選択された行オブジェクトを取得できます。

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

上記のコードでは、ボタンのクリック イベント行で選択された行オブジェクトを取得します。オブジェクトを取得してコンソールに出力します。

概要:

上記の 2 つの方法は両方とも、フォーム内の行オブジェクトを取得するのに役立ちます。具体的な方法の選択は、さまざまな状況に基づいて行う必要があります。 v-for 命令ループを通じてフォームをレンダリングする場合、パフォーマンスを向上させ、問題を回避するには、各行に key 属性の値として一意のキー値を持たせる必要があることに注意してください。

以上がvueのフォーム内の行オブジェクトを取得する方法（2つの方法）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。