[Vuejs]-Pass an object as props

by

0👍

✅

Assuming that you want a specific key of item as the label, you can just pass that key string then use it in your dropdown item. Make sure that the label prop accepts only String.

<div class="form-group">
  <auto-complete path="/api/accounts/autoComplete/" label="account_name" placeholder="My PlaceHolder"></auto-complete>
</div>

<template>
  <input autocomplete="off" type="text" class="form-control form-control-border" :placeholder="placeholder" v-model="query" @input="autoComplete" @focus="suggestion = true" />

  <li @click="selected(item.account_name)" v-for="item in data" :key="item.id">
    <a class="dropdown-item" href="#">{{ item[label] }}</a>
  </li>
</template>

<script>
export default {
  props: {
    label: String,
    placeholder: String
  }
}
</script>

0👍

You are sending string, not object.
You should do:

:label="item.account_name"

Instead of

:label="'item.account_name'"

Leave a comment