Question

请看看我的代码段。我试图仅在单击其相应的全部查看/更少查看按钮时才切换viewMore数据属性。

每个项目都需要有自己的切换按钮，但是我只想切换我正在单击的“活动”项目。

new Vue({
  data: {
    viewMore: false,
    arrayOfData: [{
        description: 'ITEM 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
      },
      {
        description: 'ITEM 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
      },
      {
        description: 'ITEM 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
      },
    ],
  },
  methods: {
    showItemModifiers: function() {
      this.viewMore = !this.viewMore;
    }
  },
  el: '#app',
});

.selectedModifiersList {
  max-height: 45px;
  overflow: hidden;
  line-height: 1;
  margin-bottom: 20px;
}

.selectedModifiersList.viewMore {
  max-height: 100%;
  overflow: auto;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <div v-for="item in arrayOfData">
    <div class="selectedModifiersList" :class="{'viewMore':viewMore}">
      <p>{{item.description}}</p>
    </div>

    <button @click="showItemModifiers">
    <span v-if="viewMore">View Less</span>
    <span v-else >View All</span>
  </button>
  </div>
</div>

Answer 1

每个数据都必须有viewMore。
切换时，仅切换数据中的viewMore。

new Vue({
  data: {
    arrayOfData: [{
        viewMore: false,
        description: 'ITEM 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
      },
      {
        viewMore: false,
        description: 'ITEM 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
      },
      {
        viewMore: false,
        description: 'ITEM 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
      },
    ],
  },
  methods: {
    showItemModifiers: function(item) {
      item.viewMore = !item.viewMore;
    }
  },
  el: '#app',
});

.selectedModifiersList {
  max-height: 45px;
  overflow: hidden;
  line-height: 1;
  margin-bottom: 20px;
}

.selectedModifiersList.viewMore {
  max-height: 100%;
  overflow: auto;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <div v-for="item in arrayOfData">
    <div class="selectedModifiersList" :class="{'viewMore':item.viewMore}">
      <p>{{item.description}}</p>
    </div>

    <button @click="showItemModifiers(item)">
    <span v-if="item.viewMore">View Less</span>
    <span v-else >View All</span>
  </button>
  </div>
</div>

Answer 2

如果您不想修改数据数组，则可以创建一个组件来单独处理每个项目的状态。

new Vue({
  data: {
    arrayOfData: [{
        description: 'ITEM 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
      },
      {
        description: 'ITEM 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
      },
      {
        description: 'ITEM 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.',
      },
    ],
  },
  el: '#app',
  components: {
    viewMore: {
      template: '#view-more-template',
      props: ['item'],
      data() {
        return {
          expand: false
        };
      },
      methods: {
        toggle() {
          this.expand = !this.expand; 
        }
      }
    }
  }
});

.selectedModifiersList {
  max-height: 45px;
  overflow: hidden;
  line-height: 1;
  margin-bottom: 20px;
}

.selectedModifiersList.viewMore {
  max-height: 100%;
  overflow: auto;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

<div id="app">
  <view-more v-for="item in arrayOfData" :item="item"></view-more>
</div>

<template id="view-more-template">
  <div>
    <div class="selectedModifiersList" :class="{'viewMore':expand}">
      <p>{{item.description}}</p>
    </div>

    <button @click="toggle">
      <span v-if="expand">View Less</span>
      <span v-else >View All</span>
    </button>
  </div>
</template>

切换项目特定的数据属性以显示/隐藏文本Vue Js

2 个答案: