monkukui No title
No License TypeScript
2019年08月30日
Copy Clone
/// Questions.vue
<template>
  <div class="pagi-nation">
    <p>curPageId: {{curPageId}}</p>
    <p>totalItemNum: {{totalItemNum}}</p>

    <div v-for="id in questionsList">
      <div class="box">
        <p>title {{id}}</p>
        <p>description {{id}}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch} from 'vue-property-decorator';

@Component
export default class PagiNation extends Vue {

  @Prop()
  private curPageId!: number; // 現在のページ番号
  @Prop()
  private totalItemNum!: number; // アイテムの合計数

  private questionsList: number[] = [];
  
  private getQuestionsList(): void {
    this.questionsList = [];
    for(let i: number = 1; i <= 10; i++) {
      this.questionsList.push(i + (this.curPageId - 1) * 10);
    }
  };
  public mounted(): void {
    this.getQuestionsList();
  };

  @Watch('curPageId')
  onCurPageIdChanged(): void {
    this.getQuestionsList();
  }

}
</script>

<style scoped>
.box {
  padding: 0.5em 1em;
  margin: 2em 0;
  font-weight: bold;
  color: #6091d3;/*文字色*/
  background: #FFF;
  border: solid 3px #6091d3;/*線*/
  border-radius: 10px;/*角の丸み*/
}
.box p {
  margin: 0; 
  padding: 0;
}
</style>
/// Questions.vue
<template>
  <div class="pagi-nation">
    <p>curPageId: {{curPageId}}</p>
    <p>totalItemNum: {{totalItemNum}}</p>

    <div v-for="id in questionsList">
      <div class="box">
        <p>title {{id}}</p>
        <p>description {{id}}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit, Watch} from 'vue-property-decorator';

@Component
export default class PagiNation extends Vue {

  @Prop()
  private curPageId!: number; // 現在のページ番号
  @Prop()
  private totalItemNum!: number; // アイテムの合計数

  private questionsList: number[] = [];
  
  private getQuestionsList(): void {
    this.questionsList = [];
    for(let i: number = 1; i <= 10; i++) {
      this.questionsList.push(i + (this.curPageId - 1) * 10);
    }
  };
  public mounted(): void {
    this.getQuestionsList();
  };

  @Watch('curPageId')
  onCurPageIdChanged(): void {
    this.getQuestionsList();
  }

}
</script>

<style scoped>
.box {
  padding: 0.5em 1em;
  margin: 2em 0;
  font-weight: bold;
  color: #6091d3;/*文字色*/
  background: #FFF;
  border: solid 3px #6091d3;/*線*/
  border-radius: 10px;/*角の丸み*/
}
.box p {
  margin: 0; 
  padding: 0;
}
</style>
No one still commented. Please first comment.