Невозможно проверить опору в Vuejs

Question

Я пытаюсь проверить, находится ли раскрывающийся список из раскрывающегося списка в нижней части экрана, тогда раскрывающиеся элементы должны открываться вверху, в противном случае он должен открываться внизу. Данные поступают с родительской страницы. Вот как выглядит код:

 <div class="level-right" ref=isBottom>
        <b-dropdown
        v-if="dropdownItems.length"
          aria-role="list"
          position="is-bottom-left"
        >
          <b-button
            slot="trigger"
            icon-right="ellipsis-h"
          >
          </b-button>

          <b-dropdownItem
            aria-role="listitem"
            v-for="item in dropdownItems"
            :key="item.id"
          >
            {{ item.name }}
          </b-dropdownItem>
        </b-dropdown>
      </div> 

props: {
    dropdownItems: Array,
  },

isDropdownInBottom(){
        if(this.dropdownItems.length){
       let elementHeight = this.$refs.isBottom.clientHeight * this.dropdownItems.length
      let bottomSpace = window.innerHeight - this.$refs.isBottom.offsetTop + elementHeight
     if (elementHeight >= bottomSpace) {
       return "is-top-left"
     }
     else {
       return
         "is-bottom-left"
       }
     }
     } 

Мне нужно изменить это в раскрывающемся списке:

 position="is-bottom-left" 

От родителя он получает эти данные:

  dropdownItems: {
    view: {
      name: 'View',
      ...
    },
    edit: {
      name: 'Edit',
      ....
    },
    delete: {
      name: 'Delete'
     ...

    },
  },

На основе приведенного выше возврата функции, но что бы я ни делал, он либо показывает, что проверка пропуска не удалась, либо показывает, что elementHeight, dropdownItems.length или offsetTop не определены. Данные поступают с родительской страницы, поэтому я добавил условия if, но он по-прежнему не принимает это возвращаемое значение из функции в эту опору позиции. Я поместил туда опцию stati c, чтобы скрыть ошибку. Как правильно добиться этого результата?

Answer 1

Проблема в том, что вы передаете объект и пытаетесь принять его как массив, поэтому он терпит неудачу. Попробуйте это

  dropdownItems:[
 {
  name: 'View',
 },
 {
  name: 'Edit',
 },
 {
  name: 'Delete'
 },
] 

Вы можете привязать позицию таким образом в раскрывающемся списке таким образом

 :position="position"

И в ваших данных это так

data(){
  return {
    position: "is-bottom-left",
  }
}

В вашем операторе if верните его таким образом

this.position = "is-top-left"

В вашем else

return this.position