Question

/// vue js中用于手风琴的此代码可以正常工作，但不能同时显示//仅打开一个。

//有组件和传递道具数据。

@foreach($authors as $author)


// Here the author names are displayed
    {{$author->name}}

// I have to do this loop so I can show the articles of the Author
    @foreach($author->article as $article)
   <h3> {{$article->name}} </h3>

    @endforeach


@endforeach

//有用于渲染数据的模板。

class Author extends Model
{
    //

    public function article(){

        return $this->hasMany("App\Article", "user_id");

    }
}

//用于打开和关闭的调用方法

<packing-material-category v-for="(category, index) in packingMaterialCategories" :category="category" :key="index"></packing-material-category>

this.accordionOpen =！this.accordionOpen; }

Answer 1

您需要跟踪哪个项目显示在packing-material-category组件之外（openedIndex的值），并将该值传递给组件。当packing-material-category组件中的值更改时，您将发射事件change-accordion，而在父组件中，则将更新openedIndex的值

尝试一下

在您的父组件中，将openedIndex: 0添加到data。如果要默认关闭所有内容，请将值设置为false。

更新模板以传递道具index和openedIndex，以便组件知道何时显示/隐藏。

<packing-material-category
  v-for="(category, index) in packingMaterialCategories"
  :key="index"
  :index="index"
  :openedIndex="openedIndex"
  :category="category"
  @change-accordion="(newOpen) => openedIndex = newOpen"
>
</packing-material-category>

packing-material-category组件可能看起来像这样

<template>
    <div class="packing-categories">
        <div :class="packingCategoryClass">
            <h3 class="packing-category__title" @click="toggleAccordion" v-text="category.title" />
            <div v-show="index === openedIndex" class="packing-category__content">
                <div v-if="category.description" class="packing-category__description" v-text="category.description" />
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    props: [
      'category',
      'index',       // index of this component
      'openedIndex', // which item should be shown/opened
    ],
    data() {
      return {
        packingCategoryClass: '',
      }
    },
    methods: {
      toggleAccordion() {
        // Show current item. If already opened, hide current item
        let value = this.index === this.openedIndex ? false : this.index;
        // notify parent component about the change
        this.$emit('change-accordion', value)
      }
    }
  }
</script>

手风琴只在vue js中同时显示一项

1 个答案: