停止使用vuejs引用對象

我知道，當我們爲同一個實例創建新的屬性時，對象的默認行爲是它引用舊的屬性。停止使用vuejs引用對象

我有我的VUE的數據是這樣的：

export default { 
    data() { 
     return { 
      paragraph: { 
       text: "", 
       fontSize: 14, 
       key: "Paragraph", 
       align: "left" 
      } 

     } 
    }, 
    methods: { 
     addParagraph() { 
      this.$set(this.paragraph, 'key', this.paragraph.key); 
      this.$set(this.paragraph, 'text', this.paragraph.text); 
      this.$set(this.paragraph, 'fontSize', this.paragraph.fontSize); 
      this.$set(this.paragraph, 'align', this.paragraph.align); 
      this.$store.commit("appendToDocument", this.paragraph) 
     }, 
     alignment(option) { 
      this.paragraph.align = option; 
     } 
    }

每次我點擊一個按鈕，該段變化中的數據，我想考績的數據vuex店將其添加到一個JSON，所以我可以有段樹，問題是，everttime我創建一個新的paragrapg它改變了我以前創建的其他段落的值，有沒有辦法改變它？

來源

2017-08-07 Filipe Costa

@Potray回答是好。但是如果你使用Babel和stage-3（擴展運算符），它會更短。然後，你可以用這種語法複製所有屬性

addParagraph() { 
    this.$store.commit("appendToDocument", { ...this.paragraph }) 
},

來源

2017-08-07 09:52:47

這是什麼意思？ –

這裏你可以找到很好的例子https://github.com/tc39/proposal-object-rest-spread/blob/master/Spread.md 3點在這種情況下，運營商表示：創建新對象，然後複製所有對象B的屬性，然後粘貼將它們添加到abject。基本上在你的情況{... this.paragraph}做什麼@potray代碼。您可能熟悉數組的傳播/休息運算符。它降落在ES2015。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator。傳播/休息的對象幾乎是一個標準 –

只是一個想法，引用發生了什麼，ID不關心？我喜歡你的解決方案im好奇：D –

試試這個：

addParagraph() { 
     var paragraph = { 
      key: this.paragraph.key, 
      text: this.paragraph.text, 
      fontSize: this.paragraph.fontSize, 
      align: this.paragraph.alignkey, 
     } 
     this.$store.commit("appendToDocument", paragraph) 
    },

來源

2017-08-07 09:44:12 Potray

不是我喜歡的解決方案，因爲我需要所有的寫一遍，但它的工作原理：d，謝謝！ –

停止使用vuejs引用對象

回答

相關問題