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数据绑定到prop，但是此输出破坏了浏览器中的prop解析，并留下了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))
  }
}

Here's a basic demo with vanilla PHP / JavaScript

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

1 个答案: