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


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

我正在尝试使用道具将JSON对象向下传递到Vue组件中。 JSON对象是使用WordPress查询上的json_encode()计算的，该查询收集页面的所有帖子。然后，我使用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道具时，所有Vue调试器吐出的都是testprop:"{\\\\"。

关于为什么我无法在Vue道具中获取完整的JSON对象字符串的任何想法吗？

1
2
3
4
5
6
7
$newsPostQuery = new WP_Query($args);
$posts = $newsPostQuery->posts[0];
$posts = json_encode($posts);
$posts = addcslashes($posts, '"');
echo"[cc lang="php"]";
    var_dump($posts);
echo"

"；
echo $ posts;
？>

>

对于任何在此问题上绊脚石的人，可以采用以下替代方法来产生一个字符串以供道具使用：

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

如果您愿意，可以将其包装为以下函数：

1
2
3
4
function jsonToProp($data)
{
    return htmlentities(json_encode($data, JSON_HEX_QUOT), ENT_QUOTES);
}

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

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

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

注意冒号：在prop前面-您需要此属性或vue将假定内容应解析为字符串而不是数据对象。

希望这可以帮助！

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

首先，只需获取您的结果集，就不必担心任何编码/转义：

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

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

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

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

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

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

相关讨论