javascript - 如何在vue实异常(exception)部处理一个数组，并将处理后的数据赋值给vue实例内部的一个(当前为空)数组？

Question

我在页面上的脚本标记内有一组博客文章，如下所示:

var posts = [ 
    {article_name: "name", category: "test".....}, 
    {article_name: "name2", category: "test2".....},
    {...}
]

每个数组中有 30 个对象。我需要获取每个对象中的类别并将其分配给 vue 实例中的数据 Prop 。我在 vue 实例中有一个空数组，如:

var blog_posts_nav = new Vue({
    el: '#blog-posts-nav',
    data: {
        tags: []
    }
})

我想将 30 个对象中的每个“类别”映射到数据属性中的“标签”数组。我尝试通过 created() Hook 进行操作，但似乎 created Hook 无法访问数据？我试过了:

created() {
    posts.forEach( function (item) {
        this.tags.push(item.category)
    });
}

但我在控制台中收到一条错误消息，提示 tags is undefined。对我如何处理这个有什么帮助吗？基本上我想处理一组数据并将其分配给 vue 中的一个数组，然后再将其输出到页面，并且以 vue 可以与数据交互的方式。

那么首先，created() Hook (或任何 Hook )是解决此问题的最佳方法吗？或者我应该使用 methods 或 computed 之类的东西吗？

什么是“最佳实践”方式，我将如何实现这一点？

Answer 1

不能访问this的不是created()方法，而是forEach的内部上下文。

您可以先将this 捕获到本地常量，然后在循环内访问它。

console.clear()

var posts = [ 
  {article_name: "name", category: "test" }, 
  {article_name: "name2", category: "test2" },
]

Vue.component("tags",{
  template:`
    <div>
      {{tags}}
    </div>
  `,
  data(){
    return {
      tags: [],
    }
  },
  created() {
    const vm = this;
    console.log('created', vm.tags)
    posts.forEach( function (item) {
      vm.tags.push(item.category)
      console.log('created, posts.forEach', vm.tags)
    });
  }
})

new Vue({
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js"></script>
<div id="app">
  <tags></tags>
</div>