重新加载页面后如何保持活动列表组？

Question

我正在使用#listGroup 引导组件创建一个图库。我希望当单击中的其中一个专辑更改活动的#listGroup 时，即使页面重新加载或刷新。我该如何解决这个问题？

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

正如评论中提到的，状态需要被持久化。

data: {
    selected: <?php echo $aid; ?>;
}

如果 JS 代码在另一个文件中，则从 PHP 代码中添加一个 JS 变量。