I have been puzzling about this for several days( Hope for your help

I have 2 data structures determined in Vue data. Array of sources:

sources: [
  {
    id: 1,
    name: "Source_1"
  },
  {
    id: 2,
    name: "Source_2"
  },
  {
    id: 3,
    name: "Source_3"
  }
]

, and array of channels:

channels: [
  // Channels of Source_1
  {
    id: 1,
    name: "Channel_1 of Source_1",
    value: 0
  },
  {
    id: 2,
    name: "Channel_2 of Source_1",
    value: 0
  },
  // Channels of Source_2
  {
    id: 3,
    name: "Channel_1 of Source_2",
    value: 0
  },
  {
    id: 4,
    name: "Channel_2 of Source_2",
    value: 0
  },
  // Channel of Source_3
  {
    id: 5,
    name: "Channel_1 of Source_3",
    value: 0
  },
  {
    id: 6,
    name: "Channel_2 of Source_3",
    value: 0
  }
]

My purpose is to show edit menu for channel, that user has clicked on. At the moment I have this code:

...

<div v-for="source in sources" :key="source.id">
  <h2>[[ source.name ]]</h2>
  <div v-for="channel in getChannelsArray(source.id)" :key="channel.id">
    <p @click.stop.prevent="editChannel(channel.id)">[[ channel.name ]]. ID: [[ channel.id ]]</p>
    <p>Value: [[ channel.value ]]</p>
  </div>
</div>

...

methods:
  editChannel: function(channelId) {
    console.log(channelId);

    ...

  }

...

Output is corrent:

Source_1
Channel_1 of Source_1. ID: 1
Value: 0
Channel_2 of Source_1. ID: 2
Value: 0

Source_2
Channel_1 of Source_2. ID: 3
Value: 0
Channel_2 of Source_2. ID: 4
Value: 0

Source_3
Channel_1 of Source_3. ID: 5
Value: 0
Channel_2 of Source_3. ID: 6
Value: 0

BUT! If I click on channel with ID=1 (or ID=3), I have '5' printed in console. Also if I click on channel with ID=2 (or ID=4), I have '6' started.

UDP1

getChannelsArray source. It's not my code, so I'm very confused in such of this...

getChannelsArray: function (source_id) {
            let source = this.user_source.find(src => src.id == source_id);
            let info = this.sources[source.source_type];
            console.log(source_id);

            if (info) {
                let channel_info = info.channels;
                for (let i = 0; i < channel_info.length; i++) {
                    let channel = this.user_channel.find(
                        ch => ch.source == source_id && ch.number == channel_info[i]['number']);

                    channel_info[i].channel = channel;

                    if (channel) {
                        channel_info[i].export = this.user_export.find(
                            e => e.id == channel_info[i]['channel'].id);
                    }
                }
                return channel_info;
            }
            return [];
        },

1 Answers

0
Community On

The problem was that I returned reference but not new object. So I cloned instance by

let info = JSON.parse(JSON.stringify(this.sources[source.source_type]));

Thank's for help!