How can I interpolate text string in nested array to console.log()?
Example:
<template>
<div id="myNavigation">
<div
class="button_link"
v-for="(click) in items"
:key="item.click"
>
<div
class="home-navigation-item-component left-panel selected"
@click="click = menuClickNavigation(click)"
>
{{ item.click }} <!-- Should show the data string -->
</div>
</div>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{ click: 'click one' /* I want this to interpolate to console.log */ },
{ click: 'click two' /* This text string should show when a different element is clicked */ }
]
}),
methods: {
menuClickNavigation (click) {
this.click = (this.items.click)
console.log(this.items.click) /* How to interpolate the items.click value? I want it to display "click one" in the console log function. */
},
}
</script>
Console log displays undefined with current code because it's not interpolating to the desired data value text string in the nested array. Changing the interpolation method (which doesn't currently work because I have no idea how to make it work) with a text string, I get whatever is put in the console.log(), but I want the console.log to interpolate the corresponding text strings in the nested array of items.
Does this make sense?