需要與計算屬性相同的功能，但我需要能夠在初始更改後更新數據

我遇到需要在檢測到狀態更改時更新數據的情況。用戶需要能夠在textarea中進一步更改此信息。使用計算屬性會根據我的需要提取數據，但在此之後用戶所做的任何更改都會被覆蓋，因爲計算屬性會一直將此數據更改回其初始值。最初在狀態變化時提取數據的最好方法是什麼，但在那之後允許進行編輯？需要與計算屬性相同的功能，但我需要能夠在初始更改後更新數據

謝謝！

編輯：更新爲我爲@Libby所嘗試的內容。

<textarea v-model="exampleData"></textarea> 

computed: { 
     ...mapGetters({ 
      item: 'item' 
     }) 

methods: { 
    exampleFunction() { 
     this.exampleData = this.item; 
} 

mounted() { 
    this.exampleFunction(); 
}

來源

2017-07-19 Pyreal

更新exampleData爲item：

watch: { 
    item(value) { 
    this.exampleData = value; 
    } 
}

這樣你就可以綁定你exampleData到文本框，但更改item還是會影響它。

如果你想exampleData最初將被設置爲item值，這樣做，在組件的mounted鉤：

mounted() { 
    this.exampleData = this.item; 
}

Here's a fiddle.

來源

2017-07-19 17:46:41 thanksd

這似乎工作正常，我將不得不研究文檔，以真正理解這是如何工作的引擎蓋下，雖然它看起來像它正在尋找任何項目的變化，然後運行一次功能，然後之後所做的任何更改aren因爲物品保持不變，所以不會再運行。謝謝您的幫助。 – Pyreal

我的初始Watcher工作正常，我有另一個設置在單獨的組件看單獨的數據點，但第二個沒有觸發，是否有一個技巧，在多個組件中使用多個觀察器？ – Pyreal

如果您在data設置你的財產，你可以在mounted初始化只運行一次，當頁面加載：

data: 
    text: null 
mounted: -> 
    text = "This text is initialized"

，然後在您的textarea的設置v-model

<textarea v-model="text"></textarea>

因此，textarea的值將從「此文本被初始化」開始，但用戶將能夠更改它，而這些變化將在觀察者被保存在text

來源

2017-07-19 17:45:08 Libby

我試過，但它似乎像安裝功能之前「獲得」狀態的組件運行對象，安裝的函數需要正確設置本地數據，我做錯了什麼？有沒有一種方法可以告訴讓它在執行前等待正確的信息？ – Pyreal

在'data'中聲明對象後''掛載'函數應該運行。你能顯示你的代碼嗎？ – Libby

我更新了原始文章，向您展示了我嘗試使用掛載時的邏輯。這對我來說並不像我想象的那樣工作，計算將會正確執行，但是我不能在textarea內（通過V模型）更改存儲的數據，因爲它總是會回到計算屬性所在的位置返回。 – Pyreal

Vue公司已經有一個內置的解決方案來處理這個如果您使用的獲取/設置語法爲computed properties

computed: { 
    fullName: { 
    // getter 
    get: function() { 
     return this.firstName + ' ' + this.lastName 
    }, 
    // setter 
    set: function (newValue) { 
     var names = newValue.split(' ') 
     this.firstName = names[0] 
     this.lastName = names[names.length - 1] 
    } 
    } 
}

其結果是，當你的狀態改變可以通過指定它的值更新計算機屬性：

// state has changed in text area handler 
this.fullName = 'new value'

來源

2017-07-19 17:54:29

需要與計算屬性相同的功能，但我需要能夠在初始更改後更新數據

回答

相關問題