I've asked in IRC and slack but I can't get anyone to figure out why this isn't working.
//test-vue.blade.php
#extends('spark::layouts.app')
#section('content')
<div id="testing">
<input type="text" v-model="vin">
<button type="button" v-on:click="test">Click me</button>
</div>
#endsection
/* resources/assets/js/boostrap.js
|--------------------------------------------------------------------------
| Laravel Spark Components
|--------------------------------------------------------------------------
|
| Here we will load the Spark components which makes up the core client
| application. This is also a convenient spot for you to load all of
| your components that you write while building your applications.
*/
require('./../spark-components/bootstrap');
require('./home');
var f = new Vue({
el:'#testing',
data: {
items: '',
vin: 'vdfdfa'
},
created: function () {
console.log(this.vin);
this.test();
},
mounted: function (){
},
methods: {
test : function(){
alert('test function called');
},
getDetailByVin: function(){
console.log('testing');
var urlData = 'http://asisauto.app:8000/test_data.json';
// GET /someUrl
var self = this;
this.$http.get(urlData).then((response) => {
// success callback
console.log(response.body);
}, (response) => {
// error callback
console.log('error');
});
}
}
});
I've tried lots of things and can't figure out what happens.
Mounted gets called
so does
f.text(); if I place it after the declaration.
But the button press never works. there aren't any errors in the console either.
Related
I am trying to understand Vue 3 data management for Shopify Theme. After going through my old code which is based on Vue 2, I cannot update the data object by changing value in methods function.
Below is the snippet with issue.
Vue.createApp({
delimiters: ['${', '}'],//for NO CONFLICT with liquid theme
data: () => {
return {
message: 'Hello Vue'
}
}, //data ends
methods: {
setMessage: (params) => {
//setting new message
this.message = params;
}
}, //methods ends
}).mount('#app1')
<script src="https://unpkg.com/vue#3.2.31/dist/vue.global.js"></script>
<div id="app1">
<h5>${ message }</h5>
<button v-on:click="setMessage('new message')">Submit</button>
</div>
Define method like this setMessage(params) { not like this setMessage: (params) => {
I want to ask how do I rewrite vue js variable data when I use pusher on vue js.
In this case the pusher I have will change the data every 5 minutes but here I don't rewrite the previous variable.
Usually I only use:
<template>
<div class="animated fadeIn">
<b-card>
<b-card-header>
Record User
</b-card-header>
<b-card-body>
<div>
<h3>Name : {{ name }}</h3>
<h4>Email : {{ email }}</h4>
</div>
</b-card-body>
</b-card>
</div>
</template>
<script>
import Pusher from 'pusher-js'
export default {
name: 'Index',
data() {
return {
name: 'John Doe',
email: 'jdoe#gmail.com'
}
},
created () {
this.subscribe()
},
methods: {
subscribe () {
let pusher = new Pusher(process.env.VUE_APP_PUSHER_KEY, { cluster: 'ap1', forceTLS: true })
pusher.subscribe('users')
pusher.bind('list', data => {
console.log(data);
this.name = data.name
this.email = data.email
})
},
},
}
</script>
But it hasn't changed, please help.
Thank you
The problem is that pusher will append it's own context during bind. There is a way to get around it though
bind function allows you to pass the context as the 3rd parameter. You can pass this after the handler like this:
subscribe () {
let pusher = new Pusher(process.env.VUE_APP_PUSHER_KEY, { cluster: 'ap1', forceTLS: true })
pusher.subscribe('users')
pusher.bind('list', data => {
console.log(data);
this.name = data.name
this.email = data.email
}, this) // <=== pass this as context
},
ref: https://pusher.com/docs/channels/using_channels/events#binding-with-optional-this-context
if that doesn't work, you can also use the that var, which should escape the context issue.
subscribe () {
let that = this;
let pusher = new Pusher(process.env.VUE_APP_PUSHER_KEY, { cluster: 'ap1', forceTLS: true })
pusher.subscribe('users')
pusher.bind('list', data => {
console.log(data);
that.name = data.name
that.email = data.email
})
},
You might want to try the vue-pusher library which might handle the context to be more vue-friendly.
https://www.npmjs.com/package/vue-pusher
Why does that work?
there's nothing special about that, but in javascript this is a special variable that references the context. In some cases, when dealing with callback functions, the context changes. assigning this to a new variable that, stores the context of the vue method in a variable that you can then reference it even if, in this case, Pusher bind function binds a different context.
I have a Vue app (and I'm relatively new to Vue), anyway I have a generic error modal which is displayed when any of my axios calls fail.
On the modal, I want to be able to retry the failed process when the 'Retry' button is clicked but I'm struggling a bit on how to achieve this. I don't think props will help me as the modal is triggered by
VueEvent.$emit('show-error-modal')
I have managed in my catch to pass the function which has failed by using
VueEvent.$emit('show-error-modal', (this.test));
Then in my modal, I have access to it using
created() {
VueEvent.$on('show-error-modal', (processFailed) => {
console.log('processFailed', processFailed)
this.processFailed = processFailed;
$('#errorModal').modal('show').on('shown.bs.modal', this.focus);
});
}
Using 'F12' it gives
test: function test() {
var _this2 = this;
var page = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
alert('boo');
this.loading = true;
var order_by = {
'ho_manufacturers.name': 4,
'services.servicename': 4
};
axios.post('/test/url', {
id: this.selectedManufacturers,
page: page,
order_by: order_by
}).then(function (response) {
var paginator = response.data.paginator;
_this2.$store.dispatch('paginateProducts', paginator);
_this2.$store.dispatch('setProductPaginator', paginator);
_this2.loading = false;
})["catch"](function (error) {
var processFailed = 'fetchProducts';
_this2.loading = false;
VueEvent.$emit('show-error-modal', _this2.test);
console.log(error);
});
},
I don't think this is the right way of doing it though as all this. are replaced with _this2 as shown above. I need the modal to be generic so I can reuse it but I can't figure it out how to retry the process when clicking the button.
The modals are registered in my app.vue file as
<template>
<div>
<!-- Other code here -->
<app-error-modal />
</div>
</template>
<script>
// Other code here
import ErrorModal from './components/ErrorModal';
export default {
name: 'App',
components: {
// Other code here
appErrorModal: ErrorModal
}
// Other code here
</script>
Modal button HTML
<button ref="retryButton" class="btn btn-success col-lg-2" type="submit" data-dismiss="modal" #click="retryProcess">Retry</button>
Modal script code
<script>
export default {
name: "ErrorModal",
created() {
VueEvent.$on('show-error-modal', (processFailed) => {
console.log('processFailed', processFailed)
this.processFailed = processFailed;
$('#errorModal').modal('show').on('shown.bs.modal', this.focus);
});
},
methods: {
focus() {
this.$refs.retryButton.focus();
},
retryProcess() {
//this.$parent.test(); TRIED THIS BUT DIDN'T WORK
}
}
}
</script>
I'd rather not have to the store.
Use custom event on your component
<div id="app">
<error-modal v-if="isError" v-on:retry-clicked="retry"></error-modal>
<button #click="isError = true">Make Error</button>
</div>
const errorModal = {
template : "<button #click=\"$emit('retry-clicked')\">Retry</button>"
}
new Vue({
el : "#app",
data : {
isError : false
},
components : {
errorModal
},
methods : {
retry : function(){
this.isError = false;
console.log("child component has called parent when retry clicked")
}
}
})
Custom event on component - VUEJS DOC
Everything you have there looks correct. You are passing the function to retry ("test") as "processFailed" - I would call that something different such as retryFn.
Then in your error modal component you just need:
<button #click="processFailed">Retry</button>
Don't worry about what the browser shows you in F12, that is the transpiled Javascript, it will work fine.
I am pretty new to VueJs, so I am still figuring things out.
Since our templates are stored in the database, I want my templates to load async. For my components I now use the component-factory approach.
var c = Vue.component('my-async-component', function(resolve, reject){
setTimeout(function(){
resolve({
template: '<div class="loader">loaded asynchronous: {{ pageName }}</div>',
data() {
return {
pageName: 'my Page'
}
}
})
},2000)
})
But is it possible to have some kind of placeholder while loading it? I know I can do something with But in that case I need to have a parent component and I would like this to be independent.
On a Vue-instance you can do stuff in the render function end hook it up to mounted like:
var app = new Vue({
el: '#app',
data: {
finish: false,
template: null
},
render: function(createElement) {
if (!this.template) {
return createElement('div', 'loading...');
} else {
return this.template();
}
},
mounted() {
var self = this;
$.post('myUrl', {foo:'bar'}, function(response){
var tpl = response.data.template;
self.template = Vue.compile(tpl).render;
})
}
})
Is this possible in a component? And is this still working when I have some nested divs (see an other question of mine: here)
Ok, I figured it out. I just needed to reed de VUE guide a little bit bettter.
I just followed the advanced async example from the docs and now I have a working example.
So I have my template like this:
<div id="app">
<my-async-component></my-async-component>
</div>
Then in my JS I declared the template like:
var c = Vue.component('my-async-component', function(){
return {
component: new Promise(function(resolve, reject){
// setTimeout to simulate an asynchronous call
setTimeout(function(){
resolve({
template: '<div class="loader">loaded asynchronous</div>'
})
},3000)
}),
loading: Vue.component('loader', {
template: '<p>loading...</p>'
}),
error: Vue.component('load-error', {
template: '<p>error loading component</p>'
}),
delay: 200,
timeout: 10000
}
})
var vm = new Vue({
el: '#app'
});
The loading and error components could also be globally registered components, so it's easy to reuse.
Hopefully I could help someone with this answer to my own question.
I am trying to trigger a modal from the materializecss framework within a VueJS-instance.
Both, VueJS and Materializecss, are implemented correct. On their own both frameworks work fine.
Clicking the open-button results in an error:
Uncaught TypeError: data[option] is not a function
at HTMLDivElement. (adminarea.js:24562)
at Function.each (adminarea.js:10567)
at jQuery.fn.init.each (adminarea.js:10356)
at jQuery.fn.init.Plugin [as modal] (adminarea.js:24556)
at Vue$3.showLoader (adminarea.js:21396)
at boundFn (adminarea.js:54956)
at HTMLButtonElement.invoker (adminarea.js:56467)
This is my Vue-Instance:
const app = new Vue({
el: '#app',
data: {
activeUser: {
username: '',
email: ''
},
},
methods: {
showLoader(){
$('#loaderModal').modal('open');
},
closeLoader(){
$('#loaderModal').modal('close');
}
},
mounted() {
// Get current User
axios.get('/api/currentUser')
.then(response => {
this.activeUser.username = response.data.username;
this.activeUser.email = response.data.email;
});
},
components: {
Admindashboard
}
});
And here is the part of my html-file with the modal structure:
<!-- Modal Structure -->
<div id="loaderModal" class="modal">
<div class="modal-content">
<h4>Fetching data..</h4>
<div class="progress">
<div class="indeterminate"></div>
</div>
</div>
</div>
<button class="btn cyan waves-effect waves-cyan" v-on:click="showLoader">Open</button>
Any ideas? Thanks!
It seems I found an solution:
Nice to know for Laravel-users: for my current project I use Laravel 5.5 with Materializecss, VueJS and VueRouter but I think the solution is universal. Materializecss was installed via npm and has to be included into your application. I've required the css-framework within my ressources/assets/js/bootstrap.js:
...// more code
try {
window.$ = window.jQuery = require('jquery');
window.materialize = require('materialize-css');
} catch (e) {
console.log(e);
}
...// more code
Now you have to initialize the Modal-function on the mounted-event of your wrapping Vue-instance:
const app = new Vue({
router,
data: {
...
},
methods: {
testClick: function(){
console.log('Testklick-Call');
$('#modal1').modal('open');
}
},
mounted: function(){
console.log('Instance mounted');
$('.modal').modal();
}
}).$mount('#app');
The code above is placed within my ressources/assets/js/app.js and is packed by default by Laravel Mix but I think this is universal and also usable without Laravel Mix/Webpack etc.
Now you can call every modal programmatically from where ever you want. I've tested it in my main instance on a click-event. Function is placed in my Vue-instance (see above). HTML-Code see below:
<button v-on:click="testClick">Open Modal</button>
But you can also make use of the modal within a mounted-function or any other function of any component:
<template>
<div>
<p>I am an component!</p>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted!');
$('#modal1').modal('open');
}
}
</script>
This also works, if the component becomes only visible after clicked on a link (using VueRouter).
Hopefully this helps someone except me :)
As suggested here, you need to add following code in the mounted block:
mounted() {
$('#loaderModal').modal(); //New line to be added
// Get current User
axios.get('/api/currentUser')
.then(response => {
this.activeUser.username = response.data.username;
this.activeUser.email = response.data.email;
});
},