我在“examples”文件夹的intro.php文件中安装了以下代码,并正确加载了VueJS库:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Quick Search with Vue.js & PHP</title>
</head>
<body>
<div id="findkeywords">
<keywordcounter :data="keywordcounterData" :columns="keywordcounterColumns"></keywordcounter>
</div>
<form action="<?=htmlentities($_SERVER['PHP_SELF'])?>" method="post">
<label for="haystack">Enter text to analyze here.</label>
<textarea name="haystack" id="haystack" class="form-control" cols="30" rows="7"><?php if (isset($_POST['haystack'])) { echo $_POST['haystack']; } ?></textarea>
<label for="keyword">Enter comma separated keywords to search for here.</label>
<input name="keyword" id="keyword" type="text" class="form-control" value="<?php if (isset($_POST['keyword'])) { echo $_POST['keyword']; } ?>">
<button type="submit">Submit</button>
</form>
<script type="application/javascript" src="js/vue.min.js"></script>
<script type="application/javascript" src="js/vue-router.min.js"></script>
<script type="application/javascript">
Vue.component('keywordcounter', {
template: '#keywordcounter-template',
props: {
data: Array,
columns: Array
},
data: function () {
var sortOrders = {};
this.columns.forEach(function (key) {
sortOrders[key] = 1
});
return {
sortKey: '',
sortOrders: sortOrders
}
},
methods: {
sortBy: function (key) {
this.sortKey = key;
this.sortOrders[key] = this.sortOrders[key] * -1;
}
}
});
</script>
<script type="text/x-template" id="keywordcounter-template">
<table class="table table-hover">
<thead>
<tr>
<th v-for="key in columns"
style="cursor:pointer;"
@click="sortBy(key)"
:class="{active: sortKey == key}">
{{key | capitalize}}
<span class="arrow"
:class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="
entry in data
| orderBy sortKey sortOrders[sortKey]">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
</tbody>
</table>
</script>
<?php
if (isset($_POST['haystack']) and isset($_POST['keyword'])) {
$haystack = $_POST['haystack'];
$keyword = $_POST['keyword'];
if (strstr($keyword, ',')) {
$i = 0;
$keywords = explode(',', $keyword);
?>
<script>
// fill the data that populates the component
var action = new Vue({
el: '#findkeywords',
data: {
searchQuery: '',
keywordcounterColumns: ['term', 'count'],
keywordcounterData: [
<?php
foreach ($keywords as $keyword) {
echo '{term: "' . $keyword . '",count: ' . substr_count($haystack, $keyword) . '}';
echo ($i+1 < count($keywords)) ? ',' : null;
$i++;
}
?>
]
}
});
</script>
<?php
} else {
?>
<table class="table table-hover">
<thead>
<tr>
<th style="cursor:hand;"> Term <span class="arrow asc"> </span></th>
<th style="cursor:hand;" class="active"> Count <span class="arrow asc"> </span></th>
</tr>
</thead>
<tbody>
<tr>
<td><?php echo $keyword ?></td>
<td><?php echo substr_count($haystack, $keyword); ?></td>
</tr>
</tbody>
</table>
<?php
}
}
?>
</body>
</html>
现在,如果在指定的文本区域输入中找到搜索词,则该脚本将获取搜索词出现次数,如下所示
tutorial
。
当我输入一个搜索项时,这很好,但是只要我添加一个逗号分隔的多个搜索项
Test, Newtest
即使两个字符串都出现在文本区域中,它也不会显示输出。
我怀疑是因为
间距不当
里面
keywordcounterData
性质
VueJS
组件,但我无法修复它。我试过用
json_encode
或者手动移除空间,但徒劳无功。
需要任何帮助。