在数据nuxt js中从一个字符串值生成随机词

Question

我需要帮助。在我的项目（Vue Nuxtjs）中，我正在获取一些随机词，这些词通过 api 响应在我的后端 Laravel 应用程序中生成。我必须从我的 axios 路由获取的数据中生成随机多个单词形式的一个字符串值。

这是我的数据属性。

data() {
    return {
        playWord: [],
        results: [],
    }
},

响应

和 Axios

  async fetch() {
    const {
        data
    } = await this.$axios.get(`words/${this.$route.params.play}/play`);
    this.playWord = data.word

},

我一直在尝试使用 Mounted ，它只给我一个随机值。

 mounted() {
    console.log(this.$route.params.play);

    var characters = 'watermelon';
    var result = ""
    var charactersLength = characters.length;

    for (var i = 0; i < 7; i++) {
        result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }
    return this.results = result

    console.log(result)

},

和方法

    methods: {
    ply() {
        var characters = 'watermelon';
        var result = ""
        var charactersLength = characters.length;

        for (var i = 0; i < i; i++) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        return this.result = ply
    },

},

我怎样才能执行我要求的

Answer 1

这将为您提供单个 baseWord

的 30 个变体（或更少，取决于随机数）

<template>
  <div>
    <pre>total words: {{ result.length }}</pre>
    <pre>actual list: {{ result }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseWord: 'orange',
      result: [],
    }
  },
  mounted() {
    const randomVariants = [...Array(30)].map(() =>
      this.baseWord
        .split('')
        .sort(() => 0.5 - Math.random())
        .join('')
    )
    const variantsWithoutInitialWord = randomVariants.filter(
      (word) => word !== this.baseWord // removes 'orange' if present
    )
    this.result = [...new Set(variantsWithoutInitialWord)] // removing duplicates
  },
}
</script>

像这样

要记住的一件事是不要使用在服务器和客户端上都可用的随机数并将其插入 DOM，否则你将得到 .

在数据nuxt js中从一个字符串值生成随机词

Generate random word form one string value in data nuxt js

javascript

vue.js

nuxt.js