1. 程式人生 > 程式設計 >vue 避免變數賦值後雙向繫結的操作

vue 避免變數賦值後雙向繫結的操作

如: this.list = this.list2,結果在list改變後 list2也改變,這不是我們想要的效果

第一種:

利用 JSON.parse 和 JSON.stringify

this.list= JSON.parse( JSON.stringify(this.list2) )

第二種:

ES6 的解析語法

this.list= { ...this.list2}

this.arr= [...this.arr2]

補充知識:解決vue中v-model繫結的變數賦值給了另一個變數後,兩個變數同時改變

先來看一下問題背景

我們要做一個 搜尋+分頁 的功能,使用vue

我們將分頁控制元件綁定了點選事件,點選後提交v-model繫結的formData表單,但是我們忽略了一個問題,就是當輸入的資訊改變的情況下,不點選搜尋,直接點選分頁控制元件,提交的將會是新現在搜尋框中的搜尋條件。這樣就不和邏輯了。

於是我們在data中新加了一個表單的物件 submitForm,只有在點選 查詢 的時候,v-model繫結的 formData 表單才會賦值給這個物件,而翻頁的時候提交的是 submitForm 。這樣就解決了這個問題。

data() {
  return {
  formData: {
   timeStart: '',timeEnd: '',// 分頁資料
   pageNo: 1,pageSize: 10
  },submitForm: {
   timeStart: '',}

this.submitForm = this.formData
// 用 new也是一樣達不到效果
this.submitForm = new Object(this.formData)

但是!!!

submitForm 竟然跟著變了

這是因為在Object賦值的時候,傳遞的不是值,而是引用,他們指向了同一個空間!

解決

第一種:利用 JSON.parse 和 JSON.stringify

this.submitForm = JSON.parse( JSON.stringify(this.formData) )

第二種:ES6 的解析語法

this.submitForm = { ...this.formData }

以上這篇vue 避免變數賦值後雙向繫結的操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。