代码之家 › 专栏 › 技术社区 › anaximander

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

vue.js

anaximander · 技术社区 · 6 年前

在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()
         }
       },

    }

2 回复 | 直到 6 年前

ljubadr 6 年前

编辑:在您发布代码示例之前,我已经创建了这个,但是您可以使用相同的原则:

data 添加 showMoreText ,将用于跟踪是否应显示更多数据。

<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>

ceejayoz 6 年前

这听起来像是一个新的子组件的理想情况,它将允许新组件的每个实例都有自己的独立状态。

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