An array has been created from JSON source using the $.each method. The console displays the following:
$vm0.sailNames;
[Array(24), __ob__: Observer]
(Interestingly, jQuery seems to have created an Observer)
In the Vue.js development view, it appears like this:
How can I retrieve the value of displayName by passing name as an argument? Is there a Vue.js specific way to do this?
-- edit: including some markup:
data() {
return {
(...)
sailNames: [],
(...)
}
},
methods: {
someMethod(name) {
console.log("sailNames: ", this.sailNames);
let item = this.sailNames.find(s => s.name == name);
console.log("name (someMethod's arg.): ", name);
console.log("item: ", item);
},
showName: function(e) { // this is the function triggered @click
(...)
const sourceElement = e.target.id;
this.someMethod(sourceElement);
(...)
},
(...)
Console outputs upon clicking a DOM element:
sailNames: [Array(24), __ob__: Observer]
name (someMethod's arg.): grot
item: undefined`
DOM elements in the template:
<svg>
(...)
<g id="sailShapes">
<path class="rope" d="M 15,589 395,94" />
<path id="latacz" d="M 160,404 255,391 390,104 z" class="sail" @click="showName" />
<path class="rope" d="M 30,592 395,179" />
<path id="grot" d="M 100,519 285,490 330,254 z" class="sail" @click="showName" />
(...)
</g>
(...)
</svg>