Hi everyone, I am working on a php site where I want to pass a php string variable to be used in a .vue component. Can someone help me wit this?
here is what i have in code: index.php
<?php
$foo = 72;
?>
<div id='app'></div>
app.js
import App from './views/App';
new Vue({
el: '#app',
render: h => h(App)
});
App.vue
<template>
</template>
<script>
export default {
name: 'App',
data() {
return {
foo: ''
}
}
}
</script>
<style></style>
As you can see in index.php, $foo = 72. I want that 72 value will be pass on to $foo in App.vue
<script>
export default {
name: 'App',
data() {
return {
foo: <?php echo "'".$foo."'"?>
}
}
}
</script>
Emil Moe
Senior Data Engineer
You need to use
propsto pass variables into a component.I assume you insert your component in a blade file, something like this:
<my-component :number="{{ $foo }}"></my-component>Important here is that you prefix the attribute with
:, if you don't, Vue will treat it as a string.Your Vue component should look like this:
<template> <div>{{ number }}</div> </template> <script> export default { props: { number: { type: Number, required: true // my assumption } } } </script>