Передача реквизита от Laravel Blade к Vue. Js return undefined

Question

Я пытался передать реквизиты от Laravel blade к Vue элементу, пытался использовать: : data или data оба не работали.

Возвращает undefined на Vue Devtool.

file.blade. php

<div id="truthchallenge">
  <truth-challenge data="datastring" />
</div>

truechallenge. js (main . js)

import Vue from 'vue'
import router from '../router'
import TruthChallenge from './views/TruthChallenge'

new Vue({
  router,
  render: h => h(TruthChallenge)
}).$mount('#truthchallenge')

TruthChallenge. vue

<script>
export default {
  name: 'truth-challenge',
  props: {
    data: String
  }
}
</script>

Я пытался передать реквизиты от vue. js к дочернему , работает, но не с лезвия Laravel. У вас есть подсказки о том, что не работает в моем коде?

Answer 1

Если я правильно понял, вы пытаетесь передать переменную php в шаблон Vue?

Попробуйте вот так:

<truth-challenge :data="{{ $data }}"/>