#Vue 2 + AEM 6.5 Handbook — Phần 1: Core Features

<template>
  <div class="search-filter">
    <!-- v-model chỉ reactive trong Vue scope -->
    <input v-model="searchQuery" placeholder="Tìm kiếm..." />
    <select v-model="selectedCategory">
      <option v-for="cat in categories" :key="cat.value" :value="cat.value">
        {{ cat.label }}
      </option>
    </select>

    <ul>
      <li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items:      { type: Array, default: () => [] },
    categories: { type: Array, default: () => [] }
  },
  data() {
    return {
      searchQuery: '',
      selectedCategory: ''
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        const matchQuery = item.name.toLowerCase().includes(this.searchQuery.toLowerCase());
        const matchCat = !this.selectedCategory || item.category === this.selectedCategory;
        return matchQuery && matchCat;
      });
    }
  }
}
</script>

<template>
  <div>
    <button @click="showDetails = !showDetails">Toggle</button>
    <div v-if="showDetails" class="details-panel">
      <!-- Nội dung chỉ hiện khi user click -->
    </div>
  </div>
</template>

<template>
  <div v-cloak class="banner">
    <!-- Ẩn cho đến khi Vue compile xong -->
    <h1>{{ title }}</h1>
  </div>
</template>

<template>
  <div class="product-card">
    <span class="product-card__price">{{ formattedPrice }}</span>
    <span class="product-card__badge" v-if="isOnSale">SALE</span>
    <div class="product-card__tags">
      <span v-for="tag in sortedTags" :key="tag">{{ tag }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    price:         { type: Number, default: 0 },
    originalPrice: { type: Number, default: 0 },
    tags:          { type: Array, default: () => [] },
    locale:        { type: String, default: 'vi-VN' }
  },
  computed: {
    formattedPrice() {
      return new Intl.NumberFormat(this.locale, {
        style: 'currency', currency: 'VND'
      }).format(this.price);
    },
    isOnSale() {
      return this.originalPrice > this.price;
    },
    sortedTags() {
      return [...this.tags].sort();
    }
  }
}
</script>

<script>
export default {
  props: {
    categoryId: { type: String, default: '' }
  },
  data() {
    return {
      products: [],
      loading: false
    }
  },
  watch: {
    // Khi author thay đổi category trong AEM dialog → re-fetch
    // (Chỉ xảy ra khi component re-mount, không phải live)
    categoryId: {
      immediate: true,  // chạy ngay khi mount
      handler(newId) {
        if (newId) this.fetchProducts(newId);
      }
    }
  },
  methods: {
    async fetchProducts(categoryId) {
      this.loading = true;
      try {
        // Gọi AEM servlet hoặc external API
        const res = await fetch(`/bin/api/products?category=${categoryId}`);
        this.products = await res.json();
      } catch (err) {
        console.error('[ProductList] fetch failed:', err);
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <child-item
      v-for="item in items"
      :key="item.id"
      :item="item"
      @select="handleSelect"
    />
  </div>
</template>

<script>
import ChildItem from './ChildItem.vue';

export default {
  components: { ChildItem },
  props: { items: Array },
  methods: {
    handleSelect(item) {
      console.log('Selected:', item);
    }
  }
}
</script>

<!-- ChildItem.vue -->
<template>
  <div @click="$emit('select', item)">{{ item.name }}</div>
</template>

<script>
export default {
  props: { item: Object }
}
</script>

<!-- ComponentA.vue (emit) -->
<script>
export default {
  inject: ['EventBus'],
  methods: {
    notify() {
      this.EventBus.$emit('filter-changed', { category: 'shoes' });
    }
  }
}
</script>

<!-- ComponentB.vue (listen) — AEM component khác trên cùng trang -->
<script>
export default {
  inject: ['EventBus'],
  data() { return { activeFilter: null } },
  mounted() {
    this.EventBus.$on('filter-changed', (filter) => {
      this.activeFilter = filter;
    });
  },
  beforeDestroy() {
    this.EventBus.$off('filter-changed');
  }
}
</script>

<script>
export default {
  inject: ['aemConfig'],
  computed: {
    apiBase() {
      return `${this.aemConfig.contextPath}/bin/api`;
    },
    isAuthorMode() {
      return this.aemConfig.wcmMode === 'edit' || this.aemConfig.wcmMode === 'design';
    }
  }
}
</script>

<template>
  <div ref="swiperContainer" class="vue-carousel">
    <div class="swiper-wrapper">
      <div v-for="slide in slides" :key="slide.id" class="swiper-slide">
        <img :src="slide.imageSrc" :alt="slide.title" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import 'swiper/swiper-bundle.css';

export default {
  props: {
    slides:       { type: Array, default: () => [] },
    autoplayDelay: { type: Number, default: 3000 }
  },
  data() {
    return { swiperInstance: null }
  },
  mounted() {
    // DOM đã sẵn sàng → init Swiper
    this.$nextTick(() => {
      this.swiperInstance = new Swiper(this.$refs.swiperContainer, {
        loop: true,
        autoplay: { delay: this.autoplayDelay },
        pagination: { el: '.swiper-pagination' }
      });
    });
  },
  beforeDestroy() {
    // Cleanup khi AEM author remove component
    if (this.swiperInstance) {
      this.swiperInstance.destroy(true, true);
      this.swiperInstance = null;
    }
  }
}
</script>

<!-- BaseCard.vue — reusable wrapper -->
<template>
  <div class="base-card">
    <div class="base-card__header">
      <slot name="header">
        <h3>{{ title }}</h3>
      </slot>
    </div>
    <div class="base-card__body">
      <slot><!-- default slot --></slot>
    </div>
    <div class="base-card__footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: { title: String }
}
</script>

<!-- ProductCard.vue — dùng BaseCard với named slots -->
<template>
  <base-card :title="name">
    <template #header>
      <h3>{{ name }} <span class="badge">{{ category }}</span></h3>
    </template>

    <p>{{ description }}</p>
    <span class="price">{{ formattedPrice }}</span>

    <template #footer>
      <button @click="$emit('add-to-cart')">Thêm vào giỏ</button>
    </template>
  </base-card>
</template>

<script>
import BaseCard from './BaseCard.vue';
export default {
  components: { BaseCard },
  props: {
    name: String,
    description: String,
    price: Number,
    category: String
  },
  computed: {
    formattedPrice() {
      return new Intl.NumberFormat('vi-VN', {
        style: 'currency', currency: 'VND'
      }).format(this.price);
    }
  }
}
</script>

<!-- Dùng mixin -->
<script>
import aemMixin from '../mixins/aemMixin';

export default {
  mixins: [aemMixin],
  async created() {
    if (this.isPublishMode) {
      this.data = await this.aemFetch('/bin/api/products');
    }
  }
}
</script>

<template>
  <div>
    <span>{{ price | currency }}</span>
    <span>{{ description | truncate(150) }}</span>
    <span>{{ publishDate | dateFormat }}</span>
    <a :href="pagePath | aemPath">Xem thêm</a>
  </div>
</template>