Level 9
Hard to tell without seeing your code, but have you migrated your code to take into consideration the index order changes on v-for?
https://vuejs.org/v2/guide/migration.html#v-for-Argument-Order-for-Arrays-changed
Nov 14, 2016
3
Level 12
[2.0] Dynamically inserted component 'ref' property undefined
So I have this weird thing going on...
I loop through an array of "lines", and each line outputs several input components.
In each of those input components, there's just one input field. I made them dedicated input components because they require special behavior, and communication with the parent component through an event bus.
Basically, it follows these Vue 2 migration guidelines: https://vuejs.org/v2/guide/migration.html#Two-Way-Filters-replaced
Now, about my problem:
As in Vue's example, on each of those input fields is a ref="input" attribute, to work with in each input component.
My problem starts when I delete one of my looped lines, using this.lines.splice(line_index, 1);, and then add a new line (with including input components), I can't access this.$refs.input.value on those inserted input components. They give me the following error:
TypeError: Cannot read property 'value' of undefined
And this only happens when I first delete a line, and then add a new one, which gets the same index as the previous line.
If I just add lines, without deleting, everything works fine.
Everything is also reactive, so the problem only has to do with the refs not getting registered correctly after adding those input components on a previous (deleted) line index.
I know I'll have to provide some code for this. It'll follow shortly.
Level 12
@robgoodliffe Yes, the value-index order is correct.
It only has to do with the ref="input" not registering correctly in the dynamically inserted components, after first deleting an array item by its index.
I'll provide some example code soon.
Level 12
Late follow-up, but I thought I'd share how I solved my problem.
So my problem was when inserting components dynamically inside a v-for loop, the ref="input" attribute on the input tag, inside every component, wasn't registering when the newly inserted component would take a previous component's loop index.
Anyway, I know this is a very specific problem that I can't explain well without any code...
But, because it had to do with the ref="input" attributes not registering, I simply changed this:
this.$refs.input.value
...into this:
this.$el.value
This way, I don't have to rely on the not-registering-problem of my ref="input" attribute, but instead grab the input's value directly from my main component's $el element, which in my case is the input field.
Due to not having enough time, I won't be able to clarify this with a "working" code sample. I might come back to this in the future.
Please or to participate in this conversation.