How to get the row object in the form in vue (two methods)

In Vue, we use the v-for instruction to loop through the rendering list. What should we do if we need to get the data of a selected row in the form? In this article, I will introduce in detail how to use Vue's v-for directive and event binding to obtain row objects in the form.

1. v-for instruction

Let’s first look at the use of v-for instruction. Through the v-for instruction, we can render the data into the page in a loop to form a list. Its syntax is as follows:

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

In the above code, we use the v-for instruction to loop through each element in the list array. Each element will be rendered as an item in the list, where item represents each element in the array, and index represents the index of the element in the array.

2. Get the row object in the form

In the form, we often need to get the data of a selected row. In order to achieve this function, we can obtain the row objects in the form through the following two methods.

1. Event binding

Event binding is a common method to obtain row objects in the form. When the user clicks a certain row in the form, the corresponding event will be triggered. We can capture and process the event through event binding.

For example, we can bind a click event to each row in the table. When the user clicks on a row, the event will be triggered. The code is as follows:

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

In the above code, we bind the click event in the v-for directive. When the user clicks on a certain row, the handleClick method will be triggered. In this method, we can obtain the row object based on the index of the clicked row and perform corresponding operations. For example, in the above code, we output the contents of the selected row object through console.log.

2. Get the selected row object

In addition to event binding, Vue also provides a built-in method to get the selected row object. We can bind a ref attribute to each row and then obtain the selected row object through this attribute.

For example, we can bind the ref attribute to a certain line, as shown below:

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

In the above code, we save the reference of each line into an array through the ref instruction. Next, when we need to obtain the selected row object, we can obtain the corresponding row object by obtaining the index of the selected row in the array.

For example, we can get the selected row object in the button's click event, as shown below:

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

In the above code, we get the selected row object in the button's click event row object and output it to the console.

Summary:

Both of the above two methods can help us obtain the row objects in the form. The specific method selection should be based on different situations. It is worth noting that when rendering a form through a v-for instruction loop, each row should have a unique key value as the value of the key attribute to improve performance and avoid problems.

The above is the detailed content of How to get the row object in the form in vue (two methods). For more information, please follow other related articles on the PHP Chinese website!