Рендеринг предметов через реквизит после обработки некоторой обработки с использованием Vue.js и Vue CLI 3 - PullRequest
Новая
       32

Рендеринг предметов через реквизит после обработки некоторой обработки с использованием Vue.js и Vue CLI 3

0 голосов
/ 24 августа 2018

У меня есть главный компонент с именем 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>

1 Ответ

0 голосов
/ 24 августа 2018

Сначала вы объявили cols и rows_data как объекты в MyTable.vue, но вы объявили их как массивы в 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, и вы можете рассчитать его содержимое на основе других данных, например, здесь, с текущим индексом и размером страницы.

...