vue 解決computed修改data數(shù)據(jù)的問題

更新時間：2019年11月06日 11:46:56 作者：sunshine08_07

今天小編就為大家分享一篇vue 解決computed修改data數(shù)據(jù)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

最近在做項目的時候遇見一個問題，computed修改data數(shù)據(jù)的時候會報錯。報錯的大概意思是，不可以修改data數(shù)據(jù)的屬性值。查了一些答案，最終解決辦法是需要用到set和get?？创a：

data () {
  return {
   fold: false
 }
}

我想修改fold的值，如果不用get和set就會報錯?。。?/p>

computed:{
  listShow: {
    get: function () {
      if (!this.totalCount) {
       return false
      }
      return this.fold
     },
    set: function () {
      if (!this.totalCount) {
      this.fold = false
      return false
    }
  }
}

get里面的值可以在頁面加載或者數(shù)據(jù)改變的時候?qū)崟r更新，但是set方法里面的如果想起作用，你需要調(diào)用listShow才會起作用。

看代碼：

methods: {
  toggleList () {
   if (!this.totalCount) {
    return
   }
   this.listShow = false//這里需要調(diào)用一下
   this.fold = !this.fold
  },
}

如果不調(diào)用的情況下，邏輯都寫到get里面，就可以實時更新了。

以上這篇vue 解決computed修改data數(shù)據(jù)的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vue實現(xiàn)答題功能
最近接手做一個前端小項目，基于vue實現(xiàn)答題功能，具體功能有判斷用戶是否答對，答對的話跳到下一題，答錯的話彈窗告訴用戶有錯題，請重新答題，功能非常人性化，對實現(xiàn)代碼感興趣的朋友一起看看吧
2021-06-06
基于Vue封裝實現(xiàn)全屏功能工具類
在?Web?應用程序中,有時需要為某些內(nèi)容提供全屏顯示的功能,本文將介紹如何使用?Vue.js?3?的?Composition?API?創(chuàng)建一個全屏功能的工具類,希望對大家有所幫助
2024-03-03
vue項目使用uniapp生成app的全過程
這篇文章主要介紹了vue項目使用uniapp生成app的全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
這篇文章主要介紹了如何封裝axios form-data針對統(tǒng)一的formData入?yún)⒎绞?，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05