我正在使用#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
}
}
})
答案 0 :(得分:0)
正如评论中所提到的,州需要保留。
GnuWin32
如果JS代码在另一个文件中,那么从PHP代码中添加一个JS变量。