2019/11/28

Vue.jsで処理を噛ましてから出力したい時

Vueで処理を噛ましてから出力したい時のメモです。
変数を入れられるのすごく便利だと思いました。
Vueすごく楽しいです。

<div class="articles">
  <div v-for="article in results.articles" :key="article.post_id" class="article">
    <p class="article-txt">{{ txtCut(20,article.post_text) }}</p>
    <p class="article-price">{{ priceReplace(article.post_price) }}円</p>
  </div>
</div>

const Vue = require("vue");
const axios = require("axios");

const API_PATH = '/xxx/xxx/test.php';//APIのパス

new Vue({
    el: '#app',
    data() {
        return {
            results: [], //json格納
        }
    },
    mounted() {
        axios.get(API_PATH, {
                timeout: 15000, // ms
            })
            .then(response => {
            })
            .catch(error => {
                console.log(error);
            });
    },
    methods: {
        txtCut: function (cutNum, txt) { //文字数制限
            var txtLen = txt.length;
            if (cutNum < txtLen) { //文字を超えた
                txt = txt.slice(0, cutNum);
                return txt + '...';
            } else {
                return txt;
            }
        },
        priceReplace: function (num) { //金額にカンマ入れる
            return String(num).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
        },
    },

})