I have tried putting the code below in my app.js
import Grid from 'tui-grid'; /* ES6 */
window.Grid = Grid;
But when I try to access the global variable in my welcome.blade.php
...
<script>
const instance = new Grid({
...
});
</script>
I got error below:
Uncaught ReferenceError: Grid is not defined
Do you know how to fix this?
Related
I'm trying to use mask on Form with Laravel and VueJS using https://vuejs-tips.github.io/vue-the-mask/, I'm new to Vue so I looked for some way to use mask, I ended up finding this lib. However, I do not know how to use the example of the site since it does not show a complete example, just snippets of code.
Displays the second error:
SyntaxError: import declarations may only appear at the top level of a module inscriation: 62: 8
[Vue Warn]: Error compiling template:
[Vue Warn]: Failed to resolve directive: mask
(found in )
I added the code in the blade.php
<script src = "https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </ script>
<script>
// Local Directive
import {mask} from 'vue-the-mask'
export default {
directives: {mask}
}
</ script>
<template>
<input type = "tel" v-mask = "'##/##/####'" />
</ template>
You can't do import in native (browser) JS, you need to use laravel mix or webpack (or any other bundler)
easiest solution: laravel-mix
npm install laravel-mix --save
then open (or create webpack.mix.js file), and type this (of course you need to specify your own path)
var mix = require('laravel-mix');
mix.js('/resources/path_to_input_javascript', '/public/path_to_resulting_javascript')
In your input file you create simple vue instance (and import your component)
import Vue from 'vue';
import mask from 'path_to_component.vue'
var app = new Vue({
el: "#root", //root element name
components: {'x-mask': mask}
});
and in your component you put the code:
<script>
// Local Directive
import {mask} from 'vue-the-mask'
export default {
directives: {mask}
}
</script>
<template>
<input type = "tel" v-mask = "'##/##/####'" />
</template>
It's not that complex, once you get used to it. You should read/watch about bundlers.
in my blade.php use one component
<loading :prop_show_loading="show_loading"></loading>
Still in my blade.php
This Doesn't work
<script>
var show_loading = true;
</script>
this Does't work too
<script>
window.event = new Vue();
window.event.$emit('prop_show_loading', 'true');
</script>
and my component doing this (window is not defined)
created(){
let App = this;
console.log(global.event);
window.event.$on('close-modal', (event) => {
this.prop_show_loading = true;
})
},
Any idea?
if you need pass the prop_show_loading value from laravel to loading vue component.
you don't use ":" in the head:
<loading prop_show_loading="show_loading"></loading>
and in the loading component use:
export default {
props: ['prop_show_loading'],
...
and than you can use this.prop_show_loading to get the value.
So I'm making navbar with vue and i need to get my app name as my navbar brand, how can I do that?
Pass the env to javascript variable like this
<script>
var APP = {
"name": "{{env('APP_NAME')}}",
"url": "{{env('APP_URL')}}"
}
</script>
You can access as object APP.name or APP.url
You can set your variables in your blade template to use them in JS.
<script type="text/javascript">
window.your_scope = window.your_scope || {};
your_scope.data= '{{env('VALUE')}}';
console.log(window.your_scope.data);
</script>
Check this package https://github.com/laracasts/PHP-Vars-To-Js-Transformer
I am new in Vuejs. I have the following code and i am getting an error. I am trying to pass a var into vue file.
What do i do wrong? And how can i achieve this?
App.js:
window.Vue = require('vue');
Vue.component('formlements' ,require('./components/formelements/Input.vue') );
const app = new Vue({
el: '#app'
});
Blade:
<formlements :testinfo="{somekey: 'someinfo'}"></formlements>
Vue file
<template>
<div class="container">
{{testinfo.somekey}}
</div>
</template>
Error:
Property or method "testinfo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property
As per my comment, you have not defined props on your component or app. Even though you have bound the variable to the prop using :bind, it is still not accessible to the component.
All you need to do is declare the prop, e.g. props: { testinfo: Object }.
I have a react component in a file named ts.js:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Ts extends React.Component {
constructor(props) {
super(props);
var expected = {
lowercase:'Onlylowercase',
snakeCase:'justSnakeCase',
ProperCase: 'AndProperCase'
};
console.log("expected:",expected);
console.log("props:",props);
console.log("this.props",this.props);
console.log("props.lowercase",props.lowercase);
this.state={'lowercase':this.props.lowercase};
};
render() {
return NULL;
}
}
if (document.getElementById('ts')) {
ReactDOM.render(<Ts />, document.getElementById('ts'));
}
I also have a html page from where this is called:
<html>
<head>
<title>My TS</title>
</head>
<body>
<Ts lowercase="onlylowercase" id="ts" snakeCase="justSnakeCase" ProperCase="AndProperCase">
</Ts>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
My issue is I can't get the values lowercase="onlylowercase" id="ts" snakeCase="justSnakeCase" ProperCase="AndProperCase" recognised as props in the constructor. I need to pass in some stuff from the html to populate the initial state of the component.
When I open the HTML with Chrome console open I get:
expected: {lowercase: "Onlylowercase", snakeCase: "justSnakeCase", ProperCase: "AndProperCase"}
props: {}
__proto__: Object
or it is this.props?: {}
__proto__: Object
props.lowercase undefined
this.props.lowercase undefined
undefined
undefined
I am expecting props to be a javascript object with properties of lowercase, snakeCase and ProperCase, like the var expected.
I don't think I need to use componentWillReceiveProps - as I am trying to follow the pattern describe in the documentation here:
https://reactjs.org/docs/react-component.html#constructor
and pass in props as html attributes as described here:
https://reactjs.org/docs/components-and-props.html
I have excluded from this post the detail of the node modules and javascript includes - as the Ts component's constructor is being called which demonstrates the Ts class is "there" and my npm config is OK - it is including react and other required modules. The {{ asset() }} function is a Laravel function. The html is part of a blade template in a Laravel app.
Can anyone see what I am doing wrongly?
Your syntax is wrong. React doesn't creat a new html tag like "". You only can use tag in react component. So the right syntax is in html replace
<Ts lowercase="onlylowercase" id="ts" snakeCase="justSnakeCase" ProperCase="AndProperCase">
</Ts>
To <div id="ts"></div>
and go add to before
<script>
var lowercase="whatever";
var snakeCase="snakeCase";
...
</script>
And change to
if (document.getElementById('ts')) {
ReactDOM.render(<Ts lowercase={lowercase} snakeCase={snakeCase} />, document.getElementById('ts'));
}
ReactDOM will find a dom with id is "ts" and replace it by your ts component.