Debug School

rakesh kumar
rakesh kumar

Posted on

How to access specific element of component using ref directive in alpine js

he use of the x-ref directive in Alpine.js plays a key role in managing interactions between nested components and providing access to specific element references within JavaScript expressions. Let's break down the concept of x-ref and its application in your context.

What is x-ref?
x-ref is an Alpine.js directive used to create a reference to a DOM element within an Alpine.js component. Once an element is tagged with an x-ref, you can access it anywhere within the same component using this.$refs, allowing you to manipulate or retrieve data from the element directly.

outer component

<div class="row" style="margin-top:2%;">
    <div class="col-lg-12 col-md-12 col-sm-12 col-12">
        <div class="col-md-12 col-lg-12">
            <div class="card" style="padding: 27px;">           

            <div x-data='{
    posts: {!! json_encode($posts) !!}, 
    currentPage: 1,
    itemsPerPage: 3,  
    filteredItems: function() 
Enter fullscreen mode Exit fullscreen mode

Inner Component

 x-ref="post" :data-post-id="" :data-social-price="post.social_price"
Enter fullscreen mode Exit fullscreen mode
<template x-for="post in paginatedItems()">
        <div class="col-md-12 mb-3">
            <div class="card">
                <div class="row">
                    <div class="col-md-1">
                        <img :src="post.file_pic ? '{{ asset('storage/') }}' + post.file_pic : '{{ asset('assets/images/users/default.webp') }}'" alt="user" style="width: 100px; height: 100px; border-radius: 50%;">
                    <div class="col-md-3">
                        <div><strong x-text="post.user_name"></strong></div>
                    <h1 x-text="title"></h1> 
                        <div x-text="post.city_name + ', ' + post.state_name + ', ' + post.country_name"></div>
         <div class="col-md-8" x-data="{
            selectedAll: false,
            selectedSites: [],
            init() {
                // Parse social sites initially or when post changes
                this.selectedSites = Object.keys(JSON.parse(this.$;
        }" x-ref="post" :data-post-id="" :data-social-price="post.social_price">
    <div class="mt-2">
    <input type="checkbox" x-model="selectedAll" @change="$wire.toggleAllSites($, $,this.selectedSites)"> Select All
    <div class="row">
          <template x-for="(price, socialSite) in JSON.parse($">
          <template x-if="parseFloat(price) > 0 && JSON.parse(post.social_site).hasOwnProperty(socialSite)">

                <div class="col-md-4">
                            <!-- Ensure the checkbox is checked when it becomes disabled -->
                            <input type="checkbox"  :value="socialSite"
                                   :checked="selectedAll || selectedSites.includes(socialSite)">
                            <a :href="JSON.parse(post.social_site)[socialSite]" 
                                <span x-text="socialSite"></span>
                            <span x-text="price"></span> <span x-text="post.social_currency"></span>

Enter fullscreen mode Exit fullscreen mode


Image description

Top comments (0)