Wie aktiviere ich die listGroup nach dem Laden der Seite?

Question

Ich erstelle eine Galerie mit der Bootstrap-Komponente #listGroup. Ich möchte, wenn eines der Alben im Klick die aktive #listGroup ändert, auch wenn die Seite neu geladen oder aktualisiert wird. Wie behebe ich das?

HTML/PHP

<div class="container"> 
    <div class="row"> 
     <h2 class="col-xs-12">Gallery</h2> 
    </div><!-- /row --> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-3"> 
      <div class="list-group" id='listGroup'> 
<?php 
    include 'dismin/pages/koneksi.php'; 
    if (isset($_GET["page"])) { $page = $_GET["page"]; } else { $page=1; }; 
    $start_from = ($page-1) * 12; 
    $sql = "SELECT * FROM tbl_album where status='process' ORDER BY albumid DESC LIMIT $start_from, 12"; 
    $rs_result = mysql_query ($sql); 




####### Fetch Results From Table ######## 
$no=0; 
    while ($row = mysql_fetch_assoc($rs_result)) 
{ 
    $aid=$row['albumid']; 
    $aname=$row['name']; 
?> 
    <a href="gallery?id=<?php echo $aid; ?>" class="list-group-item" v-bind:class="{ 'active' : isSelected(<?php echo $no; ?>) }" v-on:click="selected = <?php echo $no++; ?>"><?php echo $aname; ?></a> 
    <?php } ?> 
      </div> 
     </div><!-- /col --> 
     <div class="col-xs-12 col-sm-9"> 
      <div class="row"> 
<?php 
    include "dismin/pages/koneksi.php"; 

$aid = $_GET['id']; 
    $sql = "SELECT * FROM tbl_gallery where aid=$aid and status='process'"; 
    $num_rows = mysql_num_rows(mysql_query($sql));  
####### Fetch Results From Table ######## 

    $result = mysql_query($sql); 
    while($row = mysql_fetch_array($result)) { 
    $gimage=$row['gimages']; 
?> 
       <div class="col-xs-12 col-sm-4"> 
         <a href="#" class="thumbnail"> 
          <img src="dismin/pages/galeri/aksi/gupload/<?php echo $gimage; ?>"> 
         </a> 
       </div><!-- /col --> 
       <?php } ?> 
      </div><!-- /row --> 
     </div><!-- /col --> 
    </div><!-- /row --> 
</div><!-- /container --> 

JAVASCRIPT

new Vue({ 
    el: '#listGroup', 
    data: { 
    selected: 0 
    }, 
    methods: { 
    isSelected: function (i) { 
     return i === this.selected 
    } 
    } 
}) 

Answer 1

Wie in einem Kommentar erwähnt wurde, die Zustand Bedürfnisse beibehalten werden.

Wenn der JS-Code in einer anderen Datei ist, fügen Sie eine JS-Variable aus dem PHP-Code hinzu.