Question

我有一个v-for循环，它为页面添加了一段div。在页面加载时，应该选择第一个，然后当您单击另一个时，它应该将活动类添加到单击的div并从最后一个div中删除活动类。

我尝试了以下无法解决的问题。有什么建议吗？

<div class="col-sm-6" v-for="(area, index) in areaSections"> 
    <section class="monitoring-areas section" v-on:click="changeActive()"> 
        <h3>
          Area {{index + 1}}: {{area.title}}
          <span class="section-image hidden-xs hidden-sm"> 
            <i class="icon icon-zoom"></i> 
            <router-link to="/edit-monitoring-area">
              <i class="icon icon-pen"></i>
            </router-link>
          </span>
        </h3>                         
        <div class="section-content" v-bind:class="{ active: area.isActive }"> 
            <div class="row"> 
                <div class="col-xs-5"> 
                    <div v-html="area.img"></div>                                      
                </div>                                                                     
            </div>                                 
            <div class="row hidden-lg visible-sm visible-xs visible-md"> 
                <div class="col-lg-7 col-sm-8 col-xs-7 mb"> 
                    <p class="fw700"><span class="green">Email Alerts:</span> Monthly</p> 
                </div>                                                                                                     
           </div>                             
        </div>                                                       
    </section>                                                  
</div>

<script>
    export default {
        name: 'monitoringAreas',
        data: function() {
            return {
                areaSections: [
                    {
                        title: 'Home',
                        address: {
                        street: '1517 Castillo St',
                        city: 'Santa Barbara',
                        state: 'CA',
                        postalCode: '93117'
                    },
                    img: '<img src="static/img/map-small-2.jpg" alt="map">',
                    alerts: 'Monthly',
                    isActive: true
                },
                {
                    title: "John's neighborhood",
                    address: {
                        street: '3142 West 4th St',
                        city: 'Santa Barbara',
                        state: 'CA',
                        postalCode: '93117'
                    },
                    img: '<img src="static/img/map-small-2.jpg" alt="map">',
                    alerts: 'Monthly',
                    isActive: false
                },
                {
                    title: "Near Work",
                    address: {
                        street: '174 Collegio Rd',
                        city: 'Santa Barbara',
                        state: 'CA',
                        postalCode: '93117'
                    },
                    img: '<img src="static/img/map-small-2.jpg" alt="map">',
                    alerts: 'Monthly',
                    isActive: false
                },
            ]
        }
    },
    methods: {
        isActive() {
            return this.isActive;
        }, 
            changeActive() {
                this.isActive = !this.isActive;
            }
        }
    }
</script>

Answer 1

我建议如下：

如果一次只需要一个active个部分，请创建数据属性isActive并在其中存储当前活动索引。如果再次单击活动部分（在第二次单击时切换类），也会将当前index传递给changeActive方法并存储索引或清除它：

new Vue({
  el: '#app',
  data: {
    areaSections: [...],
    isActive: null
  },
  methods: {
    changeActive(index) {
      this.isActive = this.isActive === index ?  null : index
    }
  }
})

然后，在您的模板中，确保将index传递给点击监听器：

<section class="monitoring-areas section" v-on:click="changeActive(index)">

最后，使用新数据prop来绑定active类：

v-bind:class="{ active: index == isActive }"

可在此处找到完整示例：https://jsfiddle.net/wostex/63t082p2/73/

Answer 2

如果您需要在每个区域中使用$rg = $conect->prepare("INSERT INTO account (login, Passwd, Email, Nick, Gamepoint)VALUES (?,?, ?, ?, ?);");属性，那么我可以通过将该区域发送到该函数来明确它：

isActive

在方法中：

<section class="monitoring-areas section" v-on:click="changeActive(area)">

Vue绑定点击添加活动类（并从最后一个删除）

2 个答案: