Question

首先，我使用API从数据库中获取数据集，并添加一个名为“ isShare”的自定义字段，并在初始状态下添加值“ false”，然后使用v-for迭代这些数据。然后，我想根据另一个元素的单击事件来更改“ isShare”的值。

enter image description here

我很讨厌同时使用v-show和v-if。但是在两种情况下，我都无法获得想要的结果。

这是我用于从数据库获取数据并添加一个名为“ isShare”的自定义字段的代码。

loadLessons() {
  axios.get('/api/find/non_auth_get_lessons')
    .then(({data}) => {
        (this.lessons = data)
        this.lesson_images = []
        this.lessons.forEach(lesson => {


          this.lesson_images.push(`${window.location.protocol + '//'
          + window.location.hostname}/lesson_covers/${lesson.lesson_cover_image}`)
          lesson.isShare = false
        });

      },
      (error) => {
        this.loadLessons()
      }
    )
},

这就是我迭代数据的方式。

<carousel-3d class="slider_container lesson_container" :disable3d="true"
             :space="320" :clickable="false" :controls-visible="true" style="height: 100%">

    <slide class="card m-1 lma_view bg-white" v-for="(lesson, index) in lessons" :index="index" :key="index" >

        <div class="card_img_wrapper" >
            <img :src="lesson_images[index]" class="card-img-top" alt="..." v-
                 if="lesson.lesson_cover_image !== null" draggable="false">
        </div>

        <div class="card-body" >
            <h5 class="card-title welcome_page_card_title" v-
                html="$options.filters.truncate(lesson.lesson_title, 25, '...')"></h5>

            <div class=" d-flex flex-column welcome_page_lesson_details">

                <small class="card-text">Subject : <span class="text-muted">{{
                        lesson.subject | truncate(30, '...') }}</span></small>

                <small class="card-text">Material Type : <span class="text-muted">{{
                        lesson.meterial_type === '1' ? 'Text based' : (lesson.meterial_type ===
                        '2' ? 'Video based' : 'Document based')  }}</span></small>
                <small class="card-text">Language : <span
                            class="text-muted">{{ lesson.language === '1' ? 'Sinhala' :
                        (lesson.language === '2' ? 'English' : 'Tamil') }}</span></small>
            </div>
            <hr/>

            <div class="text-center">
                <a href="#" class="btn btn-edited btn-sm pull-left">View</a>

                <span class=""><i class="fas fa-share-alt share_icon"
                                  @click="sharePopup(lesson, index)"></i></span>

                <!--<div class="share_options" v-show="lesson.isShare"></div>-->

                <div class="share_options">{{lesson.isShare}}</div>


                <span class="badge pull-right" :class="lesson.access_type === '1' ? 
                    'badge-success' :
                    (lesson.access_type === '2' ? 'badge-warning' : 'badge-info')">
                        {{ lesson.access_type === '1' ? 'Free' 
                        : (lesson.access_type === '2' ? 'Restricted' : 'Paid') }}
                </span>
            </div>

        </div>
    </slide>
</carousel-3d>

当我单击元素上具有“ share_icon”类的元素时，我需要更改“ isShare”的值

当我单击“ share_icon”时，它会触发sharePopup函数并更改“ isShare”的值，但不会呈现

sharePopup(lesson, index){
    lesson.isShare = !lesson.isShare;
}

Answer 1

您应该通过给定索引访问数组，该索引作为参数传递，如下所示：

  sharePopup(lesson, index){
            this.lessons[index].isShare = !lesson.isShare;
           this.$set(this.lessons,index, this.lessons[index])

        }

详细了解$set函数here

v-show无法按我的代码预期工作

1 个答案: