Как управлять параметром для отдельного элемента DOM из Vue.js компонента?

Question

[MarkusEfr]

Я пытаюсь сделать элемент секций с помощью Vue.js, который будет разворачиваться или сворачиваться по нажатию на иконку пользователем. Сделал отслеживание состояния с помощью параметра isActive, но столкнулся с тем, что для каждого такого элемента мне нужно отслеживать состояние отдельно, и мой подход с общим параметром компонента не подходит - если нажимаю свернуть/развернуть одну то реагируют все секции.

Как это выглядит

Бэк с api для управления секциями подвязан, записи берутся из БД.

Код компонента

<template>
  <div class="container">
    <div class="sections">
      <div class="section" v-for="section in sections">
      <div class="d-flex p-3 bg-danger text-white">
      <span >
      {{section.title}}
        <span v-if="isActive!==true">
        <span class="section-drop" v-on:click="activate">
          <v-icon name="angle-down" scale="2"></v-icon>
        </span>
        </span >
        <span v-else="isActive==true">
        <span class="section-drop" v-on:click="deactivate">
          <v-icon name="angle-up" scale="2"></v-icon>
        </span>
        </span >
      </span>
    </div>
      </div>
  </div>
  </div>
</template>
<script>
    import api from '../api';
    export default {
        name: 'Sections',
        data() {
            return {
                newSection: '',
                sections: [],
            }
        },
     props: {
       isActive: Boolean
     },
        methods: {
            activate: function () {
                this.isActive = true;
                console.log(this.isActive);
            },
            deactivate: function () {
                this.isActive = false;
                console.log(this.isActive);
            },

            createSection: function () {
                let section = this.newSection;
                if(!section) {
                    return
                }
                api.createSection(section)
                this.sections.push({
                    title: section
                });
            },
            deleteSection: function (id) {
                api.deleteSection(id)
            }
        },
        mounted() {
            api.getSections().then(response => {
                this.$log.debug("Data loaded: ", response.data)
                this.sections = response.data
            }).catch(error => {
                this.$log.debug(error)
            })
        }
    }
</script>
<style>
 .section-drop {
   position: fixed;
   left: 80%;
 }
 .section-drop :hover {
   cursor: pointer;
 }
 .section {
   margin-top: 10px;
 }
 .sections {
  margin-top: 15%;
}
</style>

Прошу помочь - пояснить, как можно это сделать, отслеживать состояние каждой секции отдельно?

Answer 1

[0xD34F]

Сделайте отдельный компонент для этих секций, со свойством isActive - у каждого экземпляра оно будет собственное. Или этих isActive'ов у вас должен быть массив, длина которого равна количеству секций. Или добавьте свойство isActive элементам sections - каждому.

Comments

[MarkusEfr]

Я перечисляю элементы Sections.vue из

App.vue

<template>
<div id="app">
  <div class="container">
  <Sections/>
  <div class = "footer">
    <a>MARKUS Corporation</a>
  </div>
</div>
</div>
</template>

<script>
    import Sections from './components/Sections.vue'
    export default {
        name: 'app',
        components: {
            Sections
        }
    }
</script>

<style>
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: DARKRED;
    text-align: center;
  }
</style>

уточните, пожалуйста, как сделать что-бы они создавались отдельными компонентами ? По идее думал оно так и будет

[0xD34F]

MarkusEfr, не "отдельными компонентами". Компонент и экземпляр компонента - не одно и то же.

Сейчас у вас есть компонент, отображающий все секции. А нужен ещё один компонент - который будет отображать одну конкретную секцию. Т.е., вместо

<div class="section" v-for="section in sections">
  ...
</div>

будет

<section-item v-for="section in sections" :sectionData="section"></section-item>

[MarkusEfr]

0xD34F, я попробовал сделать так как Вы описали, немного изменил код что-бы создавать экземпляры

Section

<template>
  <div>
  <div class="section">
      <div class="d-flex p-3 bg-danger text-white">
      <span>
      {{section.title}}
        <span v-if="isActive!==true">
        <span class="section-drop" v-on:click="activate">
          <v-icon name="angle-down" scale="2"></v-icon>
        </span>
        </span >
        <span v-else="isActive==true">
        <span class="section-drop" v-on:click="deactivate">
          <v-icon name="angle-up" scale="2"></v-icon>
        </span>
        </span >
      </span>
    </div>
  </div>
  </div>
</template>
<script>
    import api from '../api';
    export default {
        name: 'Section',
        props: {
            isActive: Boolean
        },
        methods: {
            activate: function () {
                this.isActive = true;
            },
            deactivate: function () {
                this.isActive = false;
            },
            createSection: function () {
                let section = this.newSection;
                if(!section) {
                    return
                }
                api.createSection(section)
                this.sections.push({
                    title: section
                });
            },
            deleteSection: function (id) {
                api.deleteSection(id)
            }
        }
    }
</script>
<style>
 .section-drop {
   position: fixed;
   left: 80%;
 }
 .section-drop :hover {
   cursor: pointer;
 }
 .section {
   margin-top: 10px;
 }

</style>

из

App

<template>
<div id="app">
  <div class="container">
    <div class="sections">
    <section-item v-for="section in sections"
                  :sectionData="section"></section-item>
    </div>
  <div class = "footer">
    <a>MARKUS Corporation</a>
  </div>
</div>
</div>
</template>

<script>
    import Section from "./components/Section";
    import api from './api';

    export default {
        name: 'app',
        components: {
          'section-item': Section
        },
        data() {
            return {
                newSection: '',
                sections: []
            }
        },
        mounted() {
            api.getSections().then(response => {
                this.$log.debug("Data loaded: ", response.data)
                this.sections = response.data
            }).catch(error => {
                this.$log.debug(error)
            })
        }
    }
</script>

<style>
  .sections {
    margin-top: 15%;
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    color: DARKRED;
    text-align: center;
  }
</style>

. Получаю ошибку, как я понял, связанную с тем что в секции не поступают данные.. Буду еще более благодарен если поясните что в моем коде не так, очень хочу разобраться как это сделать правильно

Ошибка

[0xD34F]

MarkusEfr,

не поступают данные

Потому что параметр не определён. Должно быть

props: {
  sectionData: Object,
},

{{section.title}}

{{ sectionData.title }}

Ну или наоборот - имя параметра на section измените.

props: {
    isActive: Boolean
},

data: () => ({
  isActive: false,
}),

v-else="isActive==true"

Очевидно, вы не понимаете, что тут написали. Откройте документацию, и разберитесь.

[MarkusEfr]

0xD34F, Спасибо большое за ответы !