New contact: TEL, EMAIL and ADR cannot be removed together

[caugner]

Describe the bug

After creating a new contact in Nextcloud Contacts, the initial ADR, EMAIL and TEL can not be removed together, but only one at a time, requiring a reload after each removal.

(I noticed this when trying to create a birthday-only contact.)

To Reproduce
Steps to reproduce the behavior:

1. Create a new contact and rename (e.g. Test):

BEGIN:VCARD
VERSION:4.0
PRODID:-//Nextcloud Contacts v3.0.5
UID:0ae196d4-bfaa-4756-a436-7ddad29d04a1
REV;VALUE=DATE-AND-OR-TIME:20190407T142905Z
FN:Test
ADR;TYPE=HOME:;;;;;;
EMAIL;TYPE=HOME:
TEL;TYPE="HOME,VOICE":
END:VCARD

2. Notice that the new contact initially has phone (TEL), email (EMAIL) and address (ADR), as shown in the UI in this order.
3. Delete the phone (TEL). [It works.]
4. Delete the email (EMAIL). [Does not work.]
5. Delete the address (ADR). [Does not work.]
6. Reload the page. [Phone is gone as expected, but email and address are still there.]
7. Delete the email (EMAIL). [It works.]
8. Delete the address (ADR). [Does not work.]
9. Reload the page again. [Email is gone as expected, but address is still there.]
10. Delete the address (ADR) [It works.]

Expected behavior
It should be possible to delete phone, email and address in one go.

Actual behavior
Deleting more than one of phone, email and address requires a reload.

Screenshots
n/a

Server configuration

Operating system: Linux

Web server: Apache

Database: MySQL

PHP version: 7.2

Nextcloud version: 15.0.6

Contacts version: 3.0.5

Updated from an older Nextcloud or fresh install: Updated

Signing status:
n/a

List of activated apps:
n/a

Nextcloud configuration:
n/a

Client configuration

Browser: Firefox 66.0.2

Operating system: Linux

CardDAV-clients: n/a

Logs

Web server error log

(omitted)

Nextcloud log

data/nextcloud.log

(omitted)

Browser log

Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”).
Content Security Policy: The page’s settings blocked the loading of a resource at eval (“script-src”).

The network log includes a PUT for each deletion, but all PUTs have the same params and the successful return code 204.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[rponline]

I can confirm this behavior on master branch.

It seems that the "localContact" variable in ContactDetails.vue:456 doesn't get updated by Vue.

I tried let localContact = contact instead. This is working.

But then - of course - we lose the abstraction of local and online contact data which brings a lot of other issues (i guess).

[rponline]

I'm not very experienced in Vue, let's see if my pull request passes the review process :)