Question

在vuejs的同一组件中找出许多框。每个框都有一个按钮，该按钮使用v-on:click显示更多文本。问题在于所有的盒子都同时对此做出响应。

如果组件中有多个按钮，是否可以定位要单击的特定按钮？

是否有某种方法可以隔离每个按钮，使它们不会一次激活？

        <div class="filter-list-area">
                  <button  @click="show =!show"> {{text}} </button>

            <ul class="filter-list-item-area"> 
              <li class="filter-list-item " v-for="(items, key) in packages">
                <div>
                  <img class="fit_rating">
                </div>
                <div class="filter-list-item-info" >
                  <h3>{{items.partner_university}}</h3>
                  <p> Match: {{items.match_value}}</p>


                      <div v-for="(courses, key) in courses"> 

                        <transition name="courses">  
                        <div class="courses2" v-show="show">              
                        <p v-if="courses.Pu_Id === items.pu_Id">
                          {{courses.Course_name}}
                         </p>
                         </div>
                          </transition>

                       </div>


                 </div>
               </li>

             </ul>
         </div>


</template>

<script>
  import testdata from '../App.vue'
    export default {
        data (){
            return{
                text: 'Show Courses',
                testFilter: 'Sweden',
                show: false
            }
        },
        props: {
          title: String,
          likes: Number,
          isPublished: Boolean,
          commentIds: Array,
          author: Object,
          testuni: Array,
          list: Array,
          packages: Array,
          courses: Array
        },

        methods:{
            afunction(){
            console.log(this.show);
            },
          changeText(){
            if(this.show){
              this.text = 'Hide Courses'
            }
            else{
              this.text = "Show Courses"
            }
          }

        },
        mounted() {
          this.afunction();
        },
       watch: {
         show: 
         function() {
         this.afunction()
         this.changeText()
         }
       },

    }

Answer 1

编辑：在您发布代码示例之前，我已经创建了此代码，但是您可以使用相同的原理：

在您的data中添加showMoreText，它将用于跟踪是否应该显示更多数据。

我同意@anaximander，您应该在此处使用子组件

简单的示例如何显示/隐藏

<template>
  <div>
    <div v-for="(box, index) in [1,2,3,4,5]">
      <div>
        Box {{ box }} <button @click="toggleMore(index)">More</button>
      </div>

      <div v-show="showMoreText[index]">
        More about box {{ box }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
        return {
        showMoreText: {},
      }
    },
    methods: {
      toggleMore(index) {
        /*
          Adds a property to a reactive object, ensuring the new property is
          also reactive, so triggers view updates.
          https://vuejs.org/v2/api/#Vue-set
         */
        this.$set(this.showMoreText, index, ! this.showMoreText[index])
      }
    }
  }
</script>

Answer 2

对于新的子组件来说，这听起来像是一种理想的情况，它将允许新组件的每个实例具有其自己的单独状态。

如果需要跨组件通信，则子组件可以向父组件发出事件。

在vuejs的同一组件中的几个元素上显示

2 个答案: