在使用 Vue.js 和 Vue CLI 3 处理一些处理后通过道具渲染项目

Posted 2023-02-23

【中文标题】在使用 Vue.js 和 Vue CLI 3 处理一些处理后通过道具渲染项目

【英文标题】：Rendering items via props after handling some processing using Vue.js and Vue CLI 3

【发布时间】：2019-01-31 05:46:37

【问题描述】：

我有一个名为 App.vue 的主要组件和一个名为 MyTable.vue 的子组件，它包含一个数据表并仅显示前 10 行，我是使用 vue cli 3，当我运行 npm run serve 命令并转到给定地址时，它只呈现我的表的 head，但是当我在 mounted() 函数里面添加一些代码时MyTable.vue 和 console.log() 一样，它也渲染了我的表格的主体，当我刷新页面时问题又回来了，我该如何处理？

这些是我的组件

App.vue

<template>
  <div class="main-page">     
    <my-table title="todos" :cols="todo_attr" :rows_data="todo_data"></my-table>        
 </div>
</template>
<script>

import MyTable from './components/MyTable.vue'
import todos from './assets/todos.json'
export default 
  name: 'app',
  data()
return
  todo_attr:[
    "todoId","id","title","completed"
  ],
     todo_data:[]   

  ,
  components: 
    MyTable
  ,
  mounted()this.todo_data=todos;

</script>

MyTable.vue

<template>
<div class="vet-container">
    <table>
        <thead>
            <th class="tab-head-cell" v-for="col in cols" :key="col">col</th>
        </thead>
        <tbody>
            <tr class="tab-rows_data-row" v-for="row in currentPageData" :key="row.id">
                <td class="tab-rows_data-cell" v-for="(cell,key,index)  in row" :key="key+index" > cell</td>
            </tr>
        </tbody>
    </table>
</div>
</template>

<script>
export default 
    name: 'my-table',
    props: 
        title: String,
        cols: ,
        rows_data: 

    ,
    data() 
        return 
            currentPageData: 
        ;
    ,
    methods:
        createFirstPage()    
          this.currentPageData = this.rows_data.slice(0, 10);
        
    
    ,
    mounted() 
     this.createFirstPage();
    

</script>

【问题讨论】：

待办事项列表可以通过这个链接找到：todos

【参考方案1】：

首先，您在MyTable.vue 中将cols 和rows_data 声明为对象，但您在App.vue 中将它们声明为数组。您还将currentPageData 声明为对象而不是数组。这可能会导致一些错误。

其次，你应该更喜欢这样做：

<template>
  <div class="vet-container">
  <table>
    <thead>
    <th class="tab-head-cell" v-for="col in cols" :key="col">col</th>
    </thead>
    <tbody>
    <tr class="tab-rows_data-row" v-for="row in currentPageData" :key="row.id">
      <td
      class="tab-rows_data-cell"
      v-for="(cell,key,index)  in row"
      :key="key+index" >cell</td>
    </tr>
    </tbody>
  </table>
  </div>
</template>

<script>
export default 
  name: 'my-table',
  props: 
    title: String,
    cols: Array,
    rows_data: Array,
  ,
  data() 
    return 
      index: 0,
      size: 10,
    ;
  ,
  computed: 
    currentPageData() 
      const start = this.index * this.size;
      const end = start + this.size;
      return this.rows_data.slice(start, end);
    ,
  ,
;
</script>

然后您可以在props 中传递索引并在单击按钮时在父级上更改它。

computed 属性的小解释：该属性的行为类似于计算的data。您可以像使用任何其他 data 或 props 一样使用它，并且可以根据其他内容（例如此处）使用当前索引和页面大小来计算其内容。

【讨论】：

我认为问题出在mounted() 函数或组件的循环寿命内，当我重新加载页面时，此函数内的代码不会执行，但是当我通过以下方式编辑此函数时添加一些代码并保存，当我检查我的页面时，我发现表格主体已呈现

是的，部分问题出在mounted 函数中，因为当您尝试对其进行切片时，rows_data 尚未实例化。我编辑了我的答案以包含一个使用 computed 属性的工作示例。你应该试一试:)