代码之家 › 专栏 › 技术社区 › Onyx

尝试迭代对象数组,并创建一个新属性,该属性包含来自该句子文本属性的单词数组

vuejs2 vue.js javascript

Onyx · 技术社区 · 3 年前

sentences: [
    {
        text: "Go away and hide behind that door where we found you just now.",
        grade: 606
    },
    {
        text: "Please don't let anyone spoil these nice fresh flowers.",
        grade: 609
    },
]

    mounted(){
        this.sentences.map((sentence) => {
            const arrayOfWords = sentence.text.split(' ');
            sentence.words = arrayOfWords
        })
        console.log(this.sentences)
    }

2 回复 | 直到 3 年前

Majed Badawi 3 年前

Array#map

this.sentences

new Vue({
  el: "#app",
  data: () => ({
    sentences: [
      { text: "Go away and hide behind that door where we found you just now.", grade: 606 },
      { text: "Please don't let anyone spoil these nice fresh flowers.", grade: 609 }
    ]
  }),
  mounted(){
    this.sentences = this.sentences.map(sentence => {
      const arrayOfWords = sentence.text.split(' ');
      sentence.words = arrayOfWords
      return sentence;
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(sentence, i) in sentences" :key="i">{{sentence.words}}</div>
</div>

computed property

new Vue({
  el: "#app",
  data: () => ({
    sentences: [
      { text: "Go away and hide behind that door where we found you just now.", grade: 606 },
      { text: "Please don't let anyone spoil these nice fresh flowers.", grade: 609 }
    ]
  }),
  computed: {
    sentencesWithWords: function() {
      return this.sentences.map(sentence => {
        const arrayOfWords = sentence.text.split(' ');
        sentence.words = arrayOfWords
        return sentence;
      });
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div v-for="(sentence, i) in sentencesWithWords" :key="i">{{sentence.words}}</div>
</div>

ABDULLOKH MUKHAMMADJONOV 3 年前

Array.map() this.sentences forEach() 要更改原始数组,请执行以下操作:

mounted(){
    this.sentences.forEach(sentence => {
         const arrayOfWords = sentence.text.split(' ');
         sentence.words = arrayOfWords
    })
    console.log(this.sentences)
}

或

mounted(){
    this.sentences = this.sentences.map(sentence => {
         sentence.words = sentence.text.split(' ');
         return sentence
    })
    console.log(this.sentences)
}

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

2 年前

Park · Vuejs道具,路径较长

2 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

2 年前

roev · 大堆来自(物体)。forEach不使用vue。js

3 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

6 年前

Ready Dev · Axios一次发出多个请求(vue.js)

6 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

6 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

6 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

6 年前

Tim · VueJS-迭代从AJAX调用返回的数据

6 年前