Как изменить данные JSon после хранения в вю объекта данных

Question

Это мой вю код:

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> 

Теперь я могу показать имя каждого пользователя просто отлично, но я хочу изменить что-то вроде, если идентификатор пользователя равен 1, тогда имя пользователя будет изменено на «Смит». Я попробовал этот код:

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 в блоге. Вот почему он не может читать какие-либо свойства.

Вы можете вызывать методы после выборки данных, в then() обратного вызова, чтобы убедиться, что у вас есть данные в массиве блога, и чем методы вызова для работы с блога:

methods: { 
    changeNames() { 
    if (this.blog[0].userId == 1) { 
      this.blog[0].userId = 'Smith' 
     } 
    }  
}, 
created() { 
    var self = this; 
    this.$http.get('https://jsonplaceholder.typicode.com/posts') 
    .then(function(response) { 
    self.blog = response.data 
    self.changeNames() // <----HERE 
    }) 
    .catch(function (error) { 
    console.log(error.statusText) 
    }) 
} 

Вот рабочий пример: jsFiddle