Vue.js

Question

我是 Vue.js 的完全初学者，但我正在尝试处理视图组件上的函数。

我看到一个教程将数据加载到一个组件上，该组件将句子分成两部分（因此，两个不同的字段），但我想调用另一个函数来随机化 returning 数据之前的句子。

句子 1 - "This is"（第 1 部分）+ "an example"（第 2 部分）
句子 2 - "Lorem ipsum dolor sit amet"（第 1 部分）+ "consectetur adipiscing."（第 2 部分）
句子 3 - "Neque porro quisquam"（第 1 部分）+ "consectetur, adipisci velit"（第 2 部分）

我会随机化一些条件（第 1 部分将与其他句子中的第 2 部分相匹配）。我已经在 vanilla javascript 中做到了这一点。我想知道的是，在 Vue 中执行此操作的最佳方法是什么（无需在已安装的内部执行）。我该怎么做？方法？渲染功能？准备好了吗？

这段代码会return原句：

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 中这样做。操纵数据是存在计算值的主要原因之一。

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 
    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>

Vue.js - 随机化数据函数（最佳实践）

Vue.js - Randomize data function (best practice)

javascript

vue-component