代码之家 › 专栏 › 技术社区 › Vicky Dev

php与javascript-json混合存在间距问题,这不会呈现多个结果

vuejs2 vue.js json php javascript

Vicky Dev · 技术社区 · 5 年前

我在“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 或者手动移除空间,但徒劳无功。

需要任何帮助。

0 回复 | 直到 5 年前