หลีกเลี่ยงการผูกข้อมูลสำหรับตัวแปรใน Vue.js

ฉันมีแบบฟอร์มง่ายๆ เพื่อขอชื่อผู้ใช้และรหัสผ่าน นี่คือข้อมูล Vue.js ของฉัน

  data: {
    app_images:[
      { app: '../assets/img/logos/logo.png' }
    ],
    json_repository:[],
    user: {
      username: null,
      password: null
    },
    submitted: null
  }

ช่องชื่อผู้ใช้และรหัสผ่านในแบบฟอร์มจะผูกไว้กับ user.username และ user.password การกดปุ่มลงชื่อเข้าใช้จะเรียกใช้ฟังก์ชัน doLogin

methods: {
  doLogin: function() {
    this.submitted = this.user;
},

ปัญหาคือตั้งแต่นี้เป็นต้นไป การแก้ไขทุกครั้งในแบบฟอร์มจะเปลี่ยนค่าในฟิลด์ "ส่งแล้ว" ด้วย และฉันต้องการหลีกเลี่ยงสิ่งนั้น


javascript forms binding data-binding vue.js
person Razinar    schedule 12.05.2017    source แหล่งที่มา

คำตอบ (2)


arrow_upward
13
arrow_downward

คุณสามารถสร้างสำเนาข้อมูลของคุณเพื่อหลีกเลี่ยงปัญหานี้ได้

methods: {
  doLogin: function() {
    this.submitted = Object.assign({}, this.user);
},

ตอนนี้ this.submitted และ this.user ของคุณไม่ได้อ้างถึงวัตถุเดียวกันอีกต่อไป และการเปลี่ยนอันหนึ่งจะไม่เปลี่ยนอันอื่น

person Chaim Friedman    schedule 12.05.2017
comment
เร็วเหมือนกระต่ายและแก้ไขปัญหาของฉัน! - person Razinar; 12.05.2017

arrow_upward
0
arrow_downward

Object.assign({}, object) ทำงานไม่ถูกต้องเมื่อคุณมีวัตถุภายในหลายรายการ ฉันแก้ไขปัญหานี้ด้วยวัตถุร้านค้าก่อนที่จะเปลี่ยนเป็นสตริงด้วย JSON.stringify จากนั้นย้อนกลับวัตถุด้วย JSON.parse เช่น...

this.beforeEditingCache = JSON.stringify(this.editObject);

และเมื่อยกเลิก

this.editObject = JSON.stringify(this.beforeEditingCache);

คุณสามารถใช้สิ่งนี้ในการแก้ไขข้อมูลในแบบฟอร์มและข้อมูลย้อนกลับได้หากยกเลิกการแก้ไข

person Yasir Rasool    schedule 12.08.2018