How to link elements of two arrays?

Question

Vue.js

It is necessary to make it so that when choosing a radio button in the modal window, this choice is also marked in the main list (on the main page). For example, if I select "Bacon" in the modal window, then the "Bacon" checkbox in the main list should become active. There are different arrays for the modal window and the main list, these are "toppings" and "freeToppings" respectively.



jsfiddle.net/8vwjxd43/1
Here is the code, the "toppings" section is responsible for the general list (marked with a comment).
The "freetoppings" section is responsible for the popup, arrays with data are named the same as the sections.

Different arrays in the popup the price of these 3 items is "0", and in the general list "1".

Answer 1

here is the code, it is not complete

Wow, that's what I understand, the decision is very smart and far-sighted - to show miserable bits. This ensures that you get the most accurate answer as soon as possible.
Vaughn, I see an event handler hanging on the dialog box:

@confirmModal = "confirmModal"

Inside it, you need to do the following: find in toppings an element with the same title as the one selected inside the window; if it is found, and it is not in choosenTopping - add it there. Something like this:

methods: {
  confirmModal() {
    const ft = this.toppings.find(n => n.title === this.freeTops.title);
    if (ft && !this.choosenTopping.includes(ft)) {
      this.choosenTopping.push(ft);
    }
    ...
  },
  ...