1

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?

0

1 Answer 1

1

Aren't you trying to access the value "click" from the items array? I think you should use console.log(this.items[0].click).

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.