vue数据对象存储后如何修改json数据

Question

这是我的 vue 代码：

new Vue({
    el : '#root',

    data : {
        blog : []
    },

    created() {
       this.$http.get('https://jsonplaceholder.typicode.com/posts')
           .then(function(response) {
               // console.log(response.data)
               this.blog = response.data
           })
           .catch(function (error) {
               this.error = 'Error! Could not reach the API. ' + error
         })
   }

});

我的 html 代码是：

<div id="root" class="container">
        <ul v-for="post in blog">
            <li> {{ post.id }}  </li>
            <li>{{ post.userId }} </li>
            <li>{{ post.title }} </li>
        </ul>

    </div>

现在我可以显示每个用户的名字就好了，但是我想修改一些东西，比如如果用户id是1，那么用户的名字就会变成"Smith"。我试过这段代码：

mounted() {
        if (this.blog[0].userId == 1) {
                this.blog[0].userId = 'Smith'
          }
    }

但是它显示这个错误:

Uncaught TypeError: Cannot read property 'userId' of undefined

如果我在带有事件的方法中使用它就可以正常工作！如何做到这一点？

console.log之后(this.blog)

也在 console.log(this.blog[0].userId) 之后我得到：“1”

Answer 1

问题是您在 mounted() 方法中的代码在将 response.data 推入 blog 数组之前完成。所以这就是它无法读取任何属性的原因。

您可以在获取数据后调用方法，在 then() 回调中确保博客数组中有数据，然后调用用于处理博客的方法：

new Vue({
  el: "#vue",
  data() {
    return {
      blog: []
    };
  },
  methods: {
    changeNames() {
      if (this.blog[0].userId == 1) {
        this.blog[0].userId = "Smith";
      }
    }
  },
  created() {
    Vue.http
      .get("https://jsonplaceholder.typicode.com/posts")
      .then(response => {
        this.blog = response.data;
        this.changeNames();
      })
      .catch((error) => {
        this.error = "Error! Could not reach the API. " + error;
      });
  }
});

这是工作示例：jsFiddle

vue数据对象存储后如何修改json数据

How to modify json data in after storing in vue data object

json

vuejs2