WafelT
@WafelT
HTML/CSS/JavaScript

Как исправить эту ошибку t.list.filter не является функцией?

629776e823f58538137583.png

<template>
  <div
    class="select-block"
    :class="[
      {
        active: openedSelect,
        '--simple': simple,
        '--min': min,
        '--full-width': fullWidth,
        '--focus': focus,
        '--thin': thin,
        '--onlyplaceholder': onlyplaceholder,
        '--firstselect': !selected,
        '--close-text': closeText,
        '--meeting-list': meetingList,
        '--arrow': arrow
      },
      classNames
    ]"
    v-click-outside="hideSelect"
  >
    <input type="text" class="select-block__input" :value="selected.name" />

    <button type="button" class="select-block__button" @click="selectToggle">

      <!--Placeholder-->
      <div class="select-block__placeholder" v-if="!selected" :style="{top: '50%', transform: 'translateY(-50%)'} " >
        {{ placeholder }}
      </div>

      <div class="select-block__placeholder" v-else :style="{top: '30%', transform: 'translateY(-50%)'}" >
        {{ placeholder }}
      </div>

      <!--Selected-->
      <div class="select-block__selected" v-if="withInput ? false : selected" :width="{top: this.widthSelected}">{{ selected.name || selected }}</div>

      <!--Selected Input-->
      <input class="select-block__selected--input" type="text" v-if="selected && withInput" :width="{top: this.widthSelected}" :value="selected" :placeholder="selected" />

      <!--Arrow-->
      <div class="select-block__arrow">
        <BaseIcon ico="arrow-down"></BaseIcon>
      </div>
    </button>

    <!--List-->
    <div class="select-block__list" v-show="openedSelect">
      <ul>
        <li
          v-for="(item, index) in newList"
          :key="index"
          :class="{ active: selectedIndex === index }"
          @click="selectItem(item, index)"
        >
          {{ item.name || item }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import BaseIcon from "@/components/global/BaseIcon";
import ClickOutside from "vue-click-outside";

export default {
  name: "BaseSelect",
  components: { BaseIcon },
  props: {
    widthSelected: {
      type: String
    },
    paddingArchive: {
      type: String
    },
    firstselect: {
      type: Boolean,
      default: false
    },
    closeText: {
      type: Boolean,
      default: false
    },
    withInput: {
      type: Boolean,
      default: false
    },
    meetingList: {
      type: Boolean,
      default: false
    },
    thin: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: ""
    },
    list: {
      type: Array,
      default: () => {
        return [];
      }
    },
    classNames: {
      type: String,
      default: ""
    },
    simple: {
      type: Boolean,
      default: false
    },
    arrow: {
      type: Boolean,
      default: false
    },
    min: {
      type: Boolean,
      default: false
    },
    fullWidth: {
      type: Boolean,
      default: false
    },
    onlyplaceholder: {
      type: Boolean,
      default: false
    },
    selectPlaceholder: {
      type: Boolean,
      default: false
    },
    room: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selected: this.firstselect ? false : "",
      selectedIndex: this.list.indexOf(this.list[0]),
      openedSelect: false,
      focus: false
    };
  },
  computed: {
    newList(e) {
      return e.list.filter(item => {
        if (item) return item;
      });
    }
  },
  methods: {
    selectToggle() {
      this.openedSelect = !this.openedSelect;
    },
    selectItem(item, index) {
      this.selected = item;
      this.selectedIndex = index;
      this.openedSelect = false;
      this.$emit('update:value', this.selected)
    },
    hideSelect() {
      this.openedSelect = false;
    }
  },
  directives: {
    ClickOutside
  }
};
</script>


Проблема в методе newList() но не понимаю какая, как можно это исправить?
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ответы на вопрос 1
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
ЕМНИП, функции в computed должны быть без параметров.
computed: {
  newList() {
    return props.list.filter((item) => item);
  }
},
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы