Vue.js - データ関数をランダム化する（ベストプラクティス）

Question

私はVue.jsの完全な初心者ですが、ビューコンポーネントの関数を処理することを検討しようとしています。

2つのフィールド（つまり2つの異なるフィールド）で区切るコンポーネントにデータをマウントするチュートリアルを見ましたが、データを返す前に文をランダム化する別の関数を呼び出したいと思います。

センテンス1は、 - （その1）+ "例"（その2）
センテンス2 "これは" - "consecteturのadipiscing" "Loremのイプサム悲しみAMET座る"（その1）+ （その2）
センテンス3 - "Nequeポロquisquam" 私はいくつかの条件にランダムであろう

（その1）+ "consectetur、adipisci velit"（その2）（その1は、他の文から部2と一致します）。私はすでにバニラのjavascriptでこれをしました。私が知りたいことは、Vueでこれを行う最善の方法は（マウントされていない状態で）行うことではありません。私はどうしたらいいですか？方法？レンダー機能？準備？

このコードは、元の文章を返します。

import axios from 'axios'; 

export default { 

name: 'ProverbiosList', 

data: function() { 

    return { 
    proverbios: [] 
    } 

}, 

mounted: function() { 
    var _self = this; 

    axios.get('http://localhost:8888/api/proverbios').then(function (response) { 

    _self.proverbios = response.data; 

    }) 
    } 
} 

Answer 1

私はほとんど常にcomputed valueでこれを行うだろう。データの操作は、計算値が存在する主な理由の1つです。

computed:{ 
    randomProverbs(){ 
    return this.randomize(this.proverbios) 
    } 
}, 

この計算値は、意味のあるインスタンスで定義されたメソッドを使用していることに注意してください。

ここでは動作例を示します。あなたはマウントの内側にそれを行うにはしたくないのはなぜ

console.clear() 
 

 
const proverbs = [ 
 
    "Actions speaks louder than words.", 
 
    "Give someone an inch, they will take a mile.", 
 
    "Let bygones be bygones", 
 
    "The shoe is on the other foot.", 
 
    "When it rains, it pours.", 
 
    "A friend in need is a friend indeed.", 
 
    "A watched pot never boils.", 
 
    "Absence makes the heart grow fonder.", 
 
    "All's fair in love and war.", 
 
    "All's well that ends well.", 
 
    "Beggars can't be choosers.", 
 
    "Better late than never.", 
 
    "Better safe than sorry.", 
 
    "Blood is thicker than water.", 
 
    "Close, but no cigar.", 
 
    "Crime doesn't pay.", 
 
    "Curiosity killed the cat.", 
 
    "Don't count your chickens before they hatch.", 
 
    "Don't put all your eggs in one basket.", 
 
    "Early to bed, early to rise makes a man healthy, wealthy, and wise.", 
 
    "Easy come, easy go.", 
 
    "Every cloud has a silver lining.", 
 
    "Every dog has its day.", 
 
    "Honesty is the best policy.", 
 
    "If at first you don't succeed, try, try again.", 
 
    "It takes two to tango." 
 
] 
 

 
const ProverbsList = { 
 
    name: 'ProverbiosList', 
 
    template:` 
 
    <div> 
 
     <span v-if="this.proverbios.length === 0">Loading proverbs...</span> 
 
     <ul v-else> 
 
     <li v-for="proverb in randomProverbs">{{proverb}}</li> 
 
     </ul> 
 
    </div> 
 
    `, 
 
    computed:{ 
 
    randomProverbs(){ 
 
     return this.randomize(this.proverbios) 
 
    } 
 
    }, 
 
    methods:{ 
 
    randomize(strings){ 
 
     const reducer = (acc, proverb) => { 
 
     let midString = proverb.length/2 
 
     acc.start.push(proverb.slice(0, proverb.indexOf(' ', midString))) 
 
     acc.end.push(proverb.slice(proverb.indexOf(' ', midString))) 
 
     return acc 
 
     } 
 
     
 
     let parts = strings.reduce(reducer,{start:[], end:[]}) 
 
     parts.start = this.shuffle(parts.start) 
 
     parts.end = this.shuffle(parts.end) 
 
     
 
     return parts.start.map((v,i) => `${v} ${parts.end[i]}`)  
 
    }, 
 
    // from https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array 
 
    shuffle(array) { 
 
     var currentIndex = array.length, temporaryValue, randomIndex; 
 
     while (0 !== currentIndex) { 
 
     randomIndex = Math.floor(Math.random() * currentIndex); 
 
     currentIndex -= 1; 
 
     temporaryValue = array[currentIndex]; 
 
     array[currentIndex] = array[randomIndex]; 
 
     array[randomIndex] = temporaryValue; 
 
     } 
 

 
     return array; 
 
    } 
 
    }, 
 
    data: function() { 
 
    return { 
 
     proverbios: [] 
 
    } 
 
    }, 
 
    mounted: function() { 
 
    // simulate an ajax request 
 
    setTimeout(() => this.proverbios = proverbs, 250) 
 
    } 
 
} 
 

 
new Vue({ 
 
    el: "#app", 
 
    components:{ProverbsList} 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 

 
<div id="app"> 
 
    <proverbs-list></proverbs-list> 
 
</div>