vue에서 양식으로 행 객체를 가져오는 방법(두 가지 방법)

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. 양식에서 행 개체 가져오기

양식에서 선택한 행의 데이터를 가져와야 하는 경우가 많습니다. 이 기능을 달성하기 위해 다음 두 가지 방법을 통해 양식의 행 객체를 얻을 수 있습니다.

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 지시문에 클릭 이벤트를 바인딩했습니다. 사용자가 특정 행을 클릭하면 handlerClick 메서드가 트리거됩니다. 이 방법에서는 클릭한 행의 인덱스를 기반으로 행 객체를 얻고 해당 작업을 수행할 수 있습니다. 예를 들어 위 코드에서는 선택된 행 객체의 내용을 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>

위 코드에서는 버튼의 클릭 이벤트에서 선택한 행 개체를 가져와 콘솔에 출력합니다.

요약:

위의 두 가지 방법 모두 양식에서 행 개체를 얻는 데 도움이 될 수 있습니다. 구체적인 방법 선택은 다양한 상황을 기반으로 해야 합니다. v-for 명령어 루프를 통해 양식을 렌더링할 때 성능을 향상하고 문제를 방지하려면 각 행에 키 속성 값으로 고유한 키 값이 있어야 한다는 점은 주목할 가치가 있습니다.

위 내용은 vue에서 양식으로 행 객체를 가져오는 방법(두 가지 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!