How to escape string data passed from laravel to vuejs

Question

I'm setting up a new website and I'd like to send data from the Laravel blade template to the Vue.js front end.

I've tried passing the php property into an html proprerty I can access from vue and this works with simple strings.

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

This does not with strings containing double quotes or html tags. I have tried binding to a prop using single quoted json_encoded data however this output breaks the prop-parsing in the browser and leaves bits of html and data scattered in the DOM.

Which Laravel version are you using?

Mozammil
– Mozammil

2019-01-01 08:29:58 +00:00
Commented Jan 1, 2019 at 8:29 — Mozammil
– Mozammil, Commented Jan 1, 2019 at 8:29

Brian Lee · Accepted Answer · 2019-01-01 10:02:26Z

2

You can hang encoded data from DOM elements and decode the content within a Vue component lifecycle hook.

// 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

edited Jan 1, 2019 at 10:02

answered Jan 1, 2019 at 9:37

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to escape string data passed from laravel to vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related