如何转义从 laravel传递给 vuejs 的字符串数据

Question

我正在建立一个新网站，我想将数据从 Laravel 刀片模板发送到 Vue.js 前端。

我尝试将 php 属性传递到我可以从 vue 访问的 html 属性中，这适用于简单的字符串。

<div id="paragraphs" originaldata="{!! $band->paragraphs !!}">
...
mounted: function() {
    this.paragraphs = this.$el.attributes.originaldata.value.split('//')
    this.paragraphs.push('')
}

这不适用于包含双引号或 html 标记的字符串。我尝试使用单引号json_encoded数据绑定到道具，但是此输出破坏了浏览器中的道具解析，并使 html 和数据分散在 DOM 中。

Answer 1

你可以从 DOM 元素中挂起编码数据，并在 Vue 组件生命周期钩子中解码内容。

// consider some arbitrary data passed from a Laravel controller containing HTML tags.
$data = '<form id="test"></form><button form="test" formaction="javascript:alert(1)">X</button>';
// echo the data within a blade layout or page element. CSRF tokens are often passed over this way.
<meta content="{{ base64_encode($data) }}" name="encoded">
// when your Vue component loads you can then access the DOM
export default {
  mounted () {
    const data = document.querySelector('meta[name="encoded"]').content
    alert(atob(data))
  }
}

这是一个使用原版 PHP/JavaScript 的基本演示