title: Dynamic row in el-table Vue JS
body: <p>I'm learning Vue JS. I'm using el-table to display my data as follows:</p>
  <p><a href="https://i.stack.imgur.com/Z3AGV.png" rel="nofollow noreferrer">el-table data</a></p>
  <p>Basically, I'm creating a function for a button's clicking event that contains parameter using properties of the row in the table (scope.row.id) in the code:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;el-table-column align=&quot;center&quot; prop=&quot;id&quot; label=&quot;Chức năng&quot; width=&quot;150&quot;&gt;
      &lt;template slot-scope=&quot;scope&quot;&gt;
        &lt;el-button
          type=&quot;primary&quot;
          icon=&quot;el-icon-switch-button&quot;
          @click=&quot;searchImportForm(scope.row.id)&quot;
        &gt;&lt;/el-button&gt;
      &lt;/template&gt;
  &lt;/el-table-column&gt;
  </code></pre>
  <p>Normally it works fine. However, I've recently added a new feature to the table which is the &quot;search&quot; feature. There is a new text box for the user to input a keyword and the table returns all the information containing that keyword.</p>
  <p>Now, when I press the button, the function does not work anymore. And my problem is that the error tells &quot;Cannot read property &quot;id&quot; of undefined&quot;.</p>
  <p>Does anyone how to handle with dynamic data table like this ??</p>
  <p>Update: Here is the full code of my problem</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="app-container"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;div class="importListHeader"&gt;
        &lt;!-- &lt;button @click="getImportData"&gt;Lấy dữ liệu&lt;/button&gt; --&gt;
  
        &lt;div class="importList-header-box-boxID"&gt;
          &lt;div&gt;Mã thùng&lt;/div&gt;
          &lt;el-input v-model="searchByUser.boxID" placeholder="Nhập mã" class="importListBoxID" /&gt;
        &lt;/div&gt;
  
        &lt;div class="importList-header-box-productList"&gt;
          &lt;div&gt;Tên SP&lt;/div&gt;
          &lt;div class="importListMultiselect"&gt;
            &lt;multiselect
              placeholder="Chọn sản phẩm"
              v-model="searchByUser.productName"
              :options="productOptions"
              label="name"
            &gt;&lt;/multiselect&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;div class="importList-header-box-supplier"&gt;
          &lt;div&gt;Tên xưởng&lt;/div&gt;
          &lt;el-input v-model="searchByUser.keyword" placeholder="Nhập tên xưởng" class="importListSupplier" /&gt;
        &lt;/div&gt;
  
        &lt;div class="importList-header-box-fromDate"&gt;
          &lt;div&gt;Từ ngày&lt;/div&gt;
          &lt;el-input
            id="importListFromDate"
            v-model="searchByUser.firstDate"
            placeholder="dd/mm/yyyy"
            class="inputBox"
          /&gt;
        &lt;/div&gt;
  
        &lt;div class="importList-header-box-toDate"&gt;
          &lt;div&gt;Đến ngày&lt;/div&gt;
          &lt;el-input
            id="importListToDate"
            v-model="searchByUser.lastDate"
            placeholder="dd/mm/yyyy"
            class="inputBox"
          /&gt;
        &lt;/div&gt;
  
        &lt;div class="importList-header-box"&gt;
          &lt;el-button
            class="buttonImportList"
            type="success"
            @click="submitSearchImportInfo"
            icon="el-icon-search"
          &gt;&lt;/el-button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;el-table ref="singleTable" :data="filteredLists" border fit highlight-current-row&gt;
        &lt;el-table-column align="center" label="#" width="55" prop="id"&gt;&lt;/el-table-column&gt;
  
        &lt;el-table-column align="center" label="Xưởng SX" width="200" prop="supplier"&gt;&lt;/el-table-column&gt;
  
        &lt;el-table-column align="center" label="Ngày nhập kho" width="150" prop="date"&gt;&lt;/el-table-column&gt;
  
        &lt;el-table-column align="center" label="Trạng thái" width="150"&gt;
          &lt;template slot-scope="scope"&gt;
            &lt;h3
              v-if="scope.row.status == 'Chưa hoàn thành' "
              style="background-color: #e8e8e8;  border-radius: 8px; font-size: 14px"
            &gt;{{ scope.row.status }}&lt;/h3&gt;
  
            &lt;h3
              v-if="scope.row.status == 'Hoàn thành' "
              style="background-color: #67c23a;  border-radius: 8px; font-size: 14px"
            &gt;{{ scope.row.status }}&lt;/h3&gt;
          &lt;/template&gt;
        &lt;/el-table-column&gt;
  
        &lt;!--
        &lt;el-table-column class-name="status-col" label="Status" width="110" align="center"&gt;
          &lt;template slot-scope="scope"&gt;
            &lt;el-tag :type="scope.row.status | statusFilter"&gt;{{ scope.row.status }}&lt;/el-tag&gt;
          &lt;/template&gt;
   
        &lt;/el-table-column&gt;
        --&gt;
        &lt;el-table-column align="center" prop="id" label="Chức năng" width="150"&gt;
          &lt;template slot-scope="scope"&gt;
            &lt;el-button
              type="primary"
              icon="el-icon-switch-button"
              @click="searchImportForm(scope.row.id)"
            &gt;&lt;/el-button&gt;
          &lt;/template&gt;
        &lt;/el-table-column&gt;
  
        &lt;el-table-column align="center" label="Người tạo phiếu" width="180"&gt;
          &lt;template slot-scope="scope"&gt;
            &lt;el-tag id="importListCreate"&gt;{{ scope.row.create_user }}&lt;/el-tag&gt;
          &lt;/template&gt;
        &lt;/el-table-column&gt;
  
        &lt;el-table-column align="center" label="Người thực hiện" width="180"&gt;\
          &lt;template slot-scope="scope"&gt;
            &lt;el-tag id="importListConfirm"&gt;{{ scope.row.confirm_user }}&lt;/el-tag&gt;
          &lt;/template&gt;
        &lt;/el-table-column&gt;
  
        &lt;el-table-column align="center" label="Ghi chú" prop="description"&gt;&lt;/el-table-column&gt;
      &lt;/el-table&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios'
  import Multiselect from 'vue-multiselect'
  
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
  
    data() {
      return {
        searchByUser: {
          keyword: '',
          firstDate: '',
          lastDate: '',
          boxID: '',
          productName: ''
        },
  
        lists: [
          // {
          //   id: '',
          //   supplier: '',
          //   date: '',
          //   status: ''
          // }
        ],
        productOptions: [{}],
  
        startDate: '00-00-0000',
        endDate: '31-12-3000'
      }
    },
  
    beforeRouteEnter(to, from, next) {
      axios
        .post('http://192.168.1.93:3000/displayAllInPaper')
        // axios.post('http://192.168.1.93:3000/displayAllInPaper')
        .then(res =&gt; {
          console.log(res)
          next(vm =&gt; {
            for (var i = 0; i &lt; res.data.length; i++) {
              vm.lists.push({
                id: res.data[i].id,
                supplier: res.data[i].supplier,
                date: res.data[i].created_at,
                status:
                  res.data[i].cur_status == 'p'
                    ? 'Chưa hoàn thành'
                    : 'Hoàn thành',
                description: res.data[i].paper_desc,
                create_user: res.data[i].create_user,
                confirm_user: res.data[i].confirm_user
              })
            }
  
            axios.post('http://192.168.1.93:3000/getProductType').then(res =&gt; {
              console.log(res)
              for (var i = 0; i &lt; res.data.length; i++) {
                vm.productOptions.push({
                  name: res.data[i].cur_name
                })
              }
            })
          })
        })
    },
  
    methods: {
      submitSearchImportInfo() {
        axios
          .post('http://192.168.1.93:3000/searchInPaperWithProduct', {
            productID: this.searchByUser.boxID,
            productName: this.searchByUser.productName
          })
          .then(res =&gt; {
            console.log(res)
            this.lists.splice(0, this.lists.length)
            for (var i = 0; i &lt; res.data.length; i++) {
              this.lists.push({
                id: res.data[i].id,
                supplier: res.data[i].supplier,
                date: res.data[i].created_at,
                status:
                  res.data[i].cur_status == 'p' ? 'Chưa hoàn thành' : 'Hoàn thành'
              })
            }
          })
      },
  
      setCurrentRow(row) {
        this.$refs.singleTable.setCurrentRow(row)
      },
  
      searchImportForm(id_par) {
        this.$store.state.products.splice(0, this.$store.state.products.length)
        this.$store.state.inPaperID = this.filteredLists[id_par - 1].id
        axios
          .post(
            'http://192.168.1.93:3000/getDetailInPaper',
            this.filteredLists[id_par - 1]
          )
          .then(res =&gt; {
            console.log(res)
            for (var i = 0; i &lt; res.data.length; i++) {
              this.$store.state.products.push({
                productID: res.data[i].id,
                cur_name: res.data[i].cur_name,
                perbox: res.data[i].perbox,
                box_amount: res.data[i].box_amount,
                scan_number: res.data[i].scan_number
              })
            }
          })
        this.$router.push({ path: '/import/details' })
      },
  
      filteredByName(lists) {
        return lists.filter(list =&gt;
          list.supplier.match(this.searchByUser.keyword)
        )
      },
  
      localizeDate(date) {
        if (!date || !date.includes('/')) return date
        const [dd, mm, yyyy] = date.split('/')
        return (date = `${yyyy}-${mm}-${dd}`)
      },
  
      convertDate(date) {
        const [yyyy, mm, dd] = date.split('-')
        var newDate = `${yyyy}${mm}${dd}`
        var newDate2 = parseInt(newDate)
        return (date = newDate2)
      },
  
      filteredByDateRange(lists) {
        if (this.searchByUser.firstDate != '') {
          this.startDate = this.searchByUser.firstDate
        }
        if (this.searchByUser.lastDate != '') {
          this.endDate = this.searchByUser.lastDate
        }
        return lists.filter(list =&gt;
          this.convertDate(list.date) &gt;=
            this.convertDate(this.localizeDate(this.startDate)) &amp;&amp;
          this.convertDate(list.date) &lt;=
            this.convertDate(this.localizeDate(this.endDate))
            ? list
            : ''
        )
      }
    },
    computed: {
      filteredLists: function() {
        // return this.filteredByDateRange(this.lists)
        if (
          this.searchByUser.keyword == '' &amp;&amp;
          this.searchByUser.firstDate == '' &amp;&amp;
          this.searchByUser.lastDate == ''
        ) {
          return this.filteredByName(this.lists)
        }
  
        if (
          this.searchByUser.keyword != '' &amp;&amp;
          this.searchByUser.firstDate == '' &amp;&amp;
          this.searchByUser.lastDate == ''
        ) {
          return this.filteredByName(this.lists)
        }
  
        if (
          this.searchByUser.keyword == '' &amp;&amp;
          (this.searchByUser.firstDate != '' || this.searchByUser.lastDate != '')
        ) {
          return this.filteredByDateRange(this.lists)
        }
  
        if (
          this.searchByUser.keyword != '' &amp;&amp;
          (this.searchByUser.firstDate != '' || this.searchByUser.lastDate != '')
        ) {
          return this.filteredByDateRange(this.filteredByName(this.lists))
        }
      }
    },
  
    components: {
      Multiselect
    }
  }
  &lt;/script&gt;
  
  &lt;style src="vue-multiselect/dist/vue-multiselect.min.css"&gt;&lt;/style&gt;
  
  &lt;style&gt;
  .importListHeader {
    max-width: 96%;
    display: flex;
    text-align: left;
    justify-content: space-between;
  }
  
  
  .inputBox {
    width: 250px;
    height: 100px;
  }
  .el-dropdown-menu {
    overflow-y: scroll;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #ffffff;
  }
  
  .importListMultiselect .multiselect__tags {
    min-height: 40px;
    display: block;
    padding: 8px 40px 0 8px;
    border-radius: 5px;
    border: 0.5px solid #e8e8e8;
    background: #fff;
    font-size: 14px;
    width: 320px;
  }
  
  .importListMultiselect .multiselect {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    display: block;
    position: relative;
    width: 320px;
    min-height: 40px;
    text-align: left;
    color: #35495e;
  }
  
  #importListFromDate {
    width: 200px;
  }
  
  #importListToDate {
    width: 200px;
  }
  
  .buttonImportList {
    position: absolute;
    top: 39px;
  }
  .el-icon-arrow-down {
    font-size: 8px;
  }
  .el-dropdown {
    vertical-align: top;
  }
  
  .importListBoxID {
    max-width: 210px;
  }
  
  .importList-header-box-boxID {
    max-width: 200px;
  }
  
  .importList-header-box-productList {
    max-width: 320px;
  }
  
  .importList-header-box-supplier {
    max-width: 250px;
  }
  
  .importList-header-box-fromDate {
    max-width: 200px;
  }
  
  .importList-header-box-toDate {
    max-width: 200px;
  }
  
  #importListCreate {
    font-size: 15px;
  }
  
  #importListConfirm {
    font-size: 15px;
    color: #35495e;
    background-color: transparent;
    border-style: none;
  }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>