为什么 Vue 不读取我通过 PHP 作为道具传递的整个 JSON 对象？

Question

我正在尝试使用道具将 JSON 对象向下传递到 Vue 组件中。 JSON 对象是使用 json_encode() 在 WordPress 查询上计算的，该查询收集页面的所有帖子。然后我使用 PHP 函数 addcslashes() 来转义我所有的双引号。

当我在此变量上使用 echo 时，这是输出：

{\"ID\":185,\"post_author\":\"1\",\"post_date\":\"2016-02-23 14:32:45\",\"post_date_gmt\":\"2016-02-23 14:32:45\"}

然而，当我将 JSON 字符串向下传递到我的 Vue prop 时，所有 Vue 调试器吐出的都是 testprop: "{\"。

知道为什么我无法在 Vue 道具中获得完整的 JSON 对象字符串吗？

$newsPostQuery = new WP_Query($args); 
$posts = $newsPostQuery->posts[0];
$posts = json_encode($posts);
$posts = addcslashes($posts, '"');
echo "<pre>";
    var_dump($posts);
echo "</pre>";
echo $posts;
?>

<testposts testprop="<?php echo $posts; ?>"
></testposts>

<script type="text/javascript">

    new Vue({
        el: '.News-Feed',
        components: {
            testposts: {
                template: '#test-posts',
                props: ['testprop'],
                ready() {
                    console.log(this.testprop);
                    this.testprop = JSON.parse(this.testprop);
                },
            }
        }
    });
</script>

Answer 1

我不确定这是否是官方的 vue.js "way" 但这是我处理预加载数据的方式。

首先获取你的结果集，先别担心 encoding/escaping:

$newsPostQuery = new WP_Query($args); 
$posts = $newsPostQuery->posts[0];

现在 javascript，为此预加载的数据创建一个全局变量。有时我会使用一个对象，以便以后可以根据需要轻松添加更多变量：

<script>
var preloaded = {
    'posts' : <?php echo json_encode($posts) ?>;
}

这样就不用担心转义了，引号没有问题。 json_encode方法就够了。

现在，在您的 vue.js 代码中，当您想要访问此数据时，您可以参考 preloaded.posts，而不是尝试通过 prop 访问。

道具非常适合简单的标量值。但是像这样 objects/json 会很快变得混乱。

Answer 2

对于遇到此问题的任何人，接受答案的另一种方法是使用以下内容生成用于道具的字符串：

htmlentities(json_encode($data, JSON_HEX_QUOT), ENT_QUOTES);

如果你愿意，你可以像这样包装这个函数：

function jsonToProp($data)
{
    return htmlentities(json_encode($data, JSON_HEX_QUOT), ENT_QUOTES);
}

将其粘贴到您的 functions.php 文件中。该调用将它与您的 vue 组件一起使用：

$posts = ...generate an array of data you want to pass into your component

<testposts :testprop="<?= jsonToProp($posts);?>"></testposts>

注意 prop 前面的冒号 : 你需要这个，否则 vue 会假设内容应该被解析为字符串而不是数据对象。

希望对您有所帮助！

为什么 Vue 不读取我通过 PHP 作为道具传递的整个 JSON 对象？

Why isn't Vue reading my entire JSON object that I'm passing down through PHP as a prop?

php

wordpress

json

vue.js