Vuetify use multiple data in :attach v-menu

I would like to add a class (searchAnchor) in addition to the property (attach). what is the correct spelling here to be able to use a property and a class?

  ....
  attach: {
                type: [String,Boolean],
                default: false
            },.....
<template>
    <v-menu absolute
            :z-index="zIndex"
            min-width="100%"
            :attach="attach && 'searchAnchor'"
            transition="slide-y-transition"
            :content-class="contentClasses"
            :nudge-bottom="calcHeight"
            :close-on-content-click="false"
            v-on="$listeners"
            :v-bind="$attrs">.....

1 answer

  • answered 2020-05-22 12:47 Komninos

    When you do

    :attach="attach && 'searchAnchor'"
    

    Javascript looks at the variable attach and evaluates it. If the evaluation returns true(in your case, it does), it returns the value after the && operator - In your case returning just the 'searchAnchor' value.

    What you want is this

    :attach="{ ...attach, searchAnchor: true }"
    

    This uses the spread(...) operator to copy your object's properties onto a new object and then adds another property to that new object, searchAnchor which's value is true.