vue.js - 第一次点击搜索时表格组件未更新

问题描述

我试图在 parent.vue 中添加一个表格组件，其中有一个搜索表单。输入正确的名称后，我必须单击两次按钮才能显示表格数据。我第一次点击搜索时尝试打印出父级中的数据，它成功了。这意味着当变量parentlistdata第一次更改时，表没有更新。

组件集成在 parent.vue 中，在组件与 parent.vue 分离之前，表格在第一次点击搜索时显示正确的数据。

我在那里做错了吗？

谢谢。

父.vue

<template>
  <div class="app-container">
    <div >
      <el-input 
        placeholder="input name" 
        v-model="searchData" 
        type="primary" 
        @keyup.enter.native="search"
      >              
      <el-button
        slot="append"    
        @click="search"
      >Search
      </el-button>
      </el-input>
    </div>
    <ListTable :parentlistdata="parentlistdata" />
  </div>
</template>

<script>
export default {
  components: { 
    ListTable: () => import('@/components/ListTable'),
  },
  data() {
    return {
      parentlistdata: null,
      searchData: '',
    }
  },
  methods: {
    search() {
      this.parentlistdata = null
      if (this.searchData.toLowerCase() == "simon") {
        const item = {
          mid: '0001',
          name: 'Simon',
          gender: 'male',
          birthdate:'1988-07-30',
          status: 'normal',
          display_time: '2020-07-22 10:23:12'
        };
        this.parentlistdata = [item]        

      }
    },
  }
}
</script>

组件：listTable.vue

<template>
  <div class="app-container" style="background-color: #fff; margin: 20px;">
    <el-table
      v-loading="listLoading"
      :data="pageListData"
      stripe
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      :header-cell-style="{background:'#eee',color:'#666'}"
    >
      <el-table-column align="center" width="200" label="ID">
        <template slot-scope="scope">
          {{ scope.row.mid }}
        </template>
      </el-table-column>
      <el-table-column label="name">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="gender" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.gender }}</span>
        </template>
      </el-table-column>
      <el-table-column label="birthdate" align="center">
        <template slot-scope="scope">
          {{ scope.row.birthdate }}
        </template>
      </el-table-column>
      <el-table-column class-name="status" label="status" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="date">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span> {{ scope.row.display_time }}</span>
        </template>
      </el-table-column>
      <el-table-column width="100" align="center"
        label="operation">       
          <template slot-scope="scope">
          <el-button
            @click.native.prevent="viewInfo(scope.row.mid)"
            type="text"
            size="small">
            view
          </el-button>
        </template>      
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange"
      :current-page="page" 
      :page-sizes="[6, 12, 24]" 
      :page-size="limit"
      background
      layout="total, prev, pager, next, sizes, jumper"
      :total="total"
      style="padding-top: 20px; text-align: right;"
      >
    </el-pagination>
  </div>
</template>

<script>

export default {
  name: "ListTable",
  props: ["parentlistdata"],
  filters: {
     statusFilter(status) {
         const statusMap = {
           normal: 'success',
           noContact: 'warning',
           lost: 'danger'
         }
         return statusMap[status]
     }
  },
  data() {
    return {
      listData: null,
      pageListData: null,
      limit: 12,
      total: null,
      page: 1,
      listLoading: false,
    }
  },
  watch: {
    parentlistdata(n, o){
      this.listData = n
      this.goNext()
    }   
  },
  methods: {
    goNext() {
        this.pageListData = this.listData.filter((item, index) =>
            index < this.page * this.limit && index >= this.limit * (this.page - 1)
        )
        this.total = this.listData.length
    },
    handleSizeChange(val) {
        this.limit = val
        this.goNext()
    },
    handleCurrentChange(val) {
        this.page = val
        this.goNext()
    },
    viewInfo(mid) {
      this.$router.push({path:'memberInfo',query:{mid}})
    }

  }
}
</script>

标签： vue.jsvue-component

vue.js - 第一次点击搜索时表格组件未更新

问题描述

解决方案

推荐阅读