如何修改JSON數據在VUE數據對象

存儲後這是我的VUE代碼：如何修改JSON數據在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」

來源

2017-01-25 Mohib

所以你的問題是沒有添加名稱，但與ID有關？因爲你得到錯誤，因爲id attr不存在 – samayo

@samayo當我嘗試它顯示此錯誤： '未捕獲TypeError：無法讀取未定義的屬性'名稱' 但如果我試着用一些事件處理程序方法，那麼它工作正常！確切地說，我想在將數據保存到數組後將其修改！ – Mohib

你可以做'console.log（this.blog）'嗎？ – samayo

問題是，你的代碼在您將博客數組中的response.data推送之前完成了mounted()方法。所以這就是爲什麼它不能讀取任何屬性。

你可以調用方法，你獲取數據後，在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

來源

2017-01-25 16:35:42

我只嘗試vue 1.x，我花了20分鐘試圖找出解決方案，我幾乎可以肯定，掛載在創建之前得到執行，這就是爲什麼這不起作用......我不知道什麼'掛載（）'做到了，因爲這是新功能。無論如何，好的答案+1 – samayo

恰恰就是我想要的東西，非常感謝你！ :) – Mohib

不客氣。要點是你的請求是異步的，你需要返回promise，所以你可以使用成功/失敗的回調！ –

如何修改JSON數據在VUE數據對象

回答

相關問題