Как правильно изменить свойство у родительского компонента, при обходе всех элементов в дочернем компоненте?

Question

[Лаврентий]

Прошу сразу прощения. Очень сложно дается после jQuery окунуться в реактивность и во vue.

К примеру есть один компонент BaseComponent. При отрисовки списка подключается второй, которому передается параметр "classGroup", как при определенном условии обхода списка в дочернем компоненте присвоить "classGroup" какое либо значение.

Вот первый компонент

<template>
    <div>
        <ul>
            <li
                v-for="item in items"
                v-bind::key="item.id">
                {{ item.name }}
                <ChildComponent v-if="item.inner" v-bind:itemInner="item.inner" v-bind: classGroup ="classGroup" />
            </li>
        </ul>
    </div>
</template>

<script>
import ChildComponent from "./ChildComponent";
export default {
    name: "BaseComponent",
    components: {
        ChildComponent
    },
    data() {
        return {
            classGroup: 'class1',
            items: [
                {
                    id: 1,
                    name: 'name1'
                }, {
                    id: 2,
                    name: 'name2',
                    inner: [
                        {
                            id: 5,
                            name: 'name5'
                        }, {
                            id: 6,
                            name: 'name6'
                        }
                    ]
                }, {
                    id: 3,
                    name: 'name3'
                }, {
                    id: 4,
                    name: 'name4'
                }
            ]
        }
    }
}
</script>

И второй компонент ChildComponent

// Вот тут то и вопрос где и как правильно мне осуществить проверку к примеру (id=4). 
// Грубо говоря:  this. classGroup = (item.id == 4) ? 'class2' : 'class3';
// Если это делается через method, то как вызвать этот метод (в какой конструкции) при отрисовки "itemInner" ?

<template>
    <ul>
        <li
            v-for="item in itemInner"
            :key="item.id" >
            {{ item.name }}
        </li>
    </ul>
</template>

<script>
export default {
    name: "ChildComponent",
    props: {
        itemInner: {},
        classGroup: {}
    }
}
</script>

Если же я вообще не правильно подхожу, подскажите в каком направлении ошибку допускаю.

Comments

[Alex]

Честно говоря не понятно что вы пытаетесь сделать. Вернее не понятно зачем это вам нужно

Answer 1

[Воващ]

В дочернем, стоит сделать вычисляемое свойство но основании которого будем наделять элем-т классами

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

Comments

[Лаврентий]

Честно говоря немного не понял. Даже если использовать через computed, в каком месте мне делать проверку по моему условию?

Или мне нужно мой itemInner.item запихнуть в отдельный компонент что бы это работало?

[Воващ]

Лаврентий, я так понимаю вам надо как-то так? https://codesandbox.io/s/modern-surf-p96nf?file=/s...

[Лаврентий]

Воващ, прошу прощения за сумбурность что не корректно так описал в самом вопросе..

Если по вашему примеру. Моя задача выделить "name2" классом, когда (item.id === 5).
Т.е. выделить родителя когда у ребенка есть условие.

[Воващ]

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

<li v-for="item in items" :key="item.id" :class="highlightObject(item)">
        {{ item.name }}
        <ChildComponent
          v-if="item.inner"
          v-bind:itemInner="item.inner"
        />
      </li>

methods: {
    highlightObject(item) {
      if ( // has inner && item.inner.id === 5 // ) { // => не стал писать условие, думаю суть ясна
        return "highlight";
      }
    },
  },

[Лаврентий]

Благодарю. Всё оказалось куда проще.

[Лаврентий]

Извиняюсь можно ещё небольшой вопрос, по правильности моего подхода к шаблонам (что бы не создавать лишний вопрос).

Когда у меня в компоненте рендерится несколько раз одинаковый блок с данными. Я его выношу в отдельный файл с компонента. Но я знаю точно что он используется ТОЛЬКО тут.

Можно ли как то в самом компоненте сделать к примеру ещё одну секцию template или как то по другому, что бы не создавать отдельный файл с компонентом (тем более у него и нет логики какой то другой), просто он повторяется в нескольких местах одного компонента.

Ну вот если совсем просто, то в данном примере
"Элемент повторяющийся" используется два раза. Как то можно сделать для него шаблон внутри этого компонента и использовать его. Или только выносить в отдельный файл?

<template>
    <div>
        <ul>
            <li>Элемент уникальный 1</li>
            <li>Элемент уникальный 2</li>
            <li>Элемент повторяющийся</li>
            <li>Элемент уникальный 3</li>
            <li>Элемент уникальный 4</li>
            <li>Элемент повторяющийся</li>
        </ul>
    </div>
</template>

<script>
export default {
}
</script>

Просто у меня столько уже этих компонентов, а по сути работают они как include для блоков.