Как создавать элемент только в том случае если прошла последняя проверка?

Question

[Fierfoxik]

Прохожу по двум циклам и сравниваю статус чекбоксов для отображения виджетов, но проблема в том что т.к первый цикл нужен просто для того чтобы пройтись по массиву и получить true или false статус то при прохождении всего массива создаются лишние блоки(см. скрин) и только при прохождении 2 цилка идет проверка которая отсекает блоки которые нам не нужны.

Можно конечно это все дело поправить на уровне верстки, но нужны ли лишние действия и лишние блоки ?

template

<div class="widgetsblock_list_grid_col" v-for="(checkbox, index) in checkboxSettings">
		<WidgetItem  v-if="test( checkbox, widget)" v-for="widget in widgetList"  :key="index"
		 :widget-data="widget"
		></WidgetItem>
</div>

js

methods:{
            test: function (checkbox,widgets) {
                if(checkbox.value===widgets.value){
                    if(checkbox.type.StatusChecked){
						return true
                    }
                }
            }
}

store

const initialState = {
    checkboxSettings: [
            {   id: 'inlineCheckbox1',
                value:'option1',
                text: 'Статистика за период',
                type: {
                    name: 'widget-statistic',
                    StatusChecked: true
                }
            },{
                id: 'inlineCheckbox2',
                value:'option2',
                text: 'Агентское вознаграждение',
                type: {
                    name: 'widget-statistic',
                    StatusChecked: true
                }
            },{
                id: 'inlineCheckbox3',
                value:'option3',
                text: 'Экономия',
                type: {
                    name: 'widget-statistic',
                    StatusChecked: true
                }
            },{
                id: 'inlineCheckbox4',
                value:'option4',
                text: 'Заканчивается аннуляция без штрафа',
                type: {
                    name: 'widget-applications',
                    StatusChecked: true
                }
            }
        ],
    widgetList: [
                    {
                        title: 'Статистика за период',
                        linkName: 'Перейти к отчету',
                        value:'option1',
                        type: 'widget-statistic',
                        widgetCalss: 'widget widget-statistics noData'
                    },{
                        title: 'Агентское вознагрождение',
                        linkName: 'Перейти к отчету',
                        value:'option2',
                        type: 'widget-statistic',
                        widgetCalss: 'widget widget-statistics noData'
                    },{
                        title: 'Заканчивается аннуляция без штрафа',
                        linkName: 'Открыть все заявки',
                        value:'option4',
                        type: 'widget-applications',
                        widgetCalss: 'widget widget-endannulment active'
                    },{
                        title: 'Скоро заезд',
                        linkName: 'Открыть все заявки',
                        value:'option5',
                        type: 'widget-applications',
                        widgetCalss: 'widget widget-endannulment active'
                    }
                ]

};

Answer 1

[Alexander]

Может попробовать привязать значения чекбоксов к моделям и на основе их значений показывать или не показывать виджет? Если чекбоксов не очень много, то прокатит.

В checkboxSettings я так понял лежат статусы чекбоксов типа true/false?

Просто вы не так много кода показали и сложновато подсказать точнее. Пишите если что.

Comments

[Fierfoxik]

Хороший вариант, но цикл со списокм виджетов проходит 2 раза
добавил в вопрос массивы по которым проходит цикл

И происходит такое)

[Alexander]

Fierfoxik, ну то что цикл 2 раза проходит это понятно.

Просто один раз проходитесь по списку виджетов, сравнивайте со статусом и выводите если надо.
Вот пример - https://codesandbox.io/s/l2zlok15jq (всё в App.vue)

Попробуйте поменять статус виджетов на false/true и посмотрите.

[Fierfoxik]

Alexander, увы список виджетов не имеет понятия о статусе, по этому приходится сначало проверять список чекбоксов (который хранит статус) а затем список виджетов и сравнивать их имена а затем уже статус проверять

p.s ссылка не рабочая.

[Alexander]

Fierfoxik, я понимаю, но проверку не обязательно делать циклом

https://codesandbox.io/s/l2zlok15jq?module=%2FApp.vue
Ссылка должна работать.

[Fierfoxik]

Alexander, Шикарно, спасибо большое!)

p.s оч странно но с рф codesandbox без прокси не доступен

[Alexander]

Fierfoxik, пожалуйста

Единственное, можете как-то улучшить обработку ошибок, если например в опциях чекбоксов не окажется статуса для нужного виджета, сейчас всё при такой ситуации упадет с ошибкой Cannot read property 'type' of undefined

Например возвращать в таком случае дефолтный true или false.

Answer 2

[Artem0071]

v-if="test( checkbox, widget)
перенеси в див

Comments

[Fierfoxik]

Нельзя, он принимает как аргумент элемент из цикла v-for="widget in widgetList" который находится в диве

[Artem0071]

v-for="(checkbox, index) in checkboxSettings" v-if="test( checkbox, widget)

можно в одном блоке делать

вы бы сначала попробовали

[Fierfoxik]

Artem0071, вас не смущает тот факт что в функцию тест падает не существующий пока аргумент widget? меня и интерпретатор смущает

Property or method "widget" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

[Artem0071]

Fierfoxik, в таком случае)

лишние действия и лишние блоки