I have data in my Topbar.vue file called activeTab that I want the value of to drive other components in my blade view but right now it's only in my Topbar.vue component.
main-page-blade.php
<div id = "app">
<Topbar>dsd</Topbar>
**** wanting to do something like this: ****
<Account v-if="activeTab === 1"></Account>
<Names v-if="activeTab === 2"></Names>
********************************************
</div>
<script type="text/javascript" src="dist/app.js">
app.js
window.Vue = require('vue');
Vue.component('topbar', require('./components/Topbar.vue').default);
export const bus = new Vue();
new Vue({
el: "#app"
})
Topbar.vue
<template>
<div class="cont">
<div class="tabs">
<a v-on:click="handleClick(1)" v-bind:class="[ activeTab === 1 ? 'active' : '' ]">Names</a>
<a v-on:click="handleClick(2)" v-bind:class="[ activeTab === 2 ? 'active' : '' ]">Order</a>
</div>
</div>
</template>
<script>
export default {
data() {
return {
activeTab: 1
}
},
methods: {
handleClick: function(num) {
this.activeTab = num
}
}
</script>
Put the management of activeTab inside the data() of your parent component.
To pass data from child to its parent, we use custom events.
So, in your Topbar.vue, you can implement handleClick like:
handleClick: function(num) {
this.$emit('click-from-topbar', num)
}
And then you will be able to catch this event in your main page doing:
<Topbar #click-from-topbar="someMethod">dsd</Topbar>
Finally, you do what you need inside the parent component (main page), using:
someMethod: function(num) {
this.activeTab = num
}
Related
I want to make tab switcher auto decide the slot for the switcher but when I am trying to make it dynamic with the help of observable no data is showing the tab content area until I write the slot area statically. With observable variable, the slot is not getting the selected Slot value.
Please check how I can do this.
slot = [[selectedSlot]] //using for the slot value in html
this.selectedSlot = ko.observable('settings');
<div id="tabbardemo">
<oj-dialog class="tab-dialog hidden" id="tabDialog" dialog-title="Tab data">
<div slot="body">
<oj-form-layout>
<oj-input-text id="t1" value="{{newTabTitle}}" label-hint="Title"></oj-input-text>
</oj-form-layout>
</div>
<div slot="footer">
<oj-button id="idOK" on-oj-action="[[addTab]]">OK</oj-button>
<oj-button id="idCancel" on-oj-action="[[closeDialog]]">Cancel</oj-button>
</div>
</oj-dialog>
<oj-button id="addTab" on-oj-action="[[openDialog]]">Add Tab</oj-button>
<br/>
<br/>
<oj-tab-bar contextmenu="tabmenu" id="hnavlist" selection="{{selectedItem}}" current-item="{{currentItem}}" edge="top" data="[[dataProvider]]"
on-oj-remove="[[onRemove]]">
<template slot="itemTemplate" data-oj-as="item">
<li class="oj-removable" :class="[[{'oj-disabled' : item.data.disabled}]]">
<a href="#">
<oj-bind-text value="[[item.data.name]]"></oj-bind-text>
</a>
</li>
</template>
<oj-menu slot="contextMenu" class="hidden" aria-label="Actions">
<oj-option data-oj-command="oj-tabbar-remove">
Removable
</oj-option>
</oj-menu>
</oj-tab-bar>
<oj-switcher value="[[selectedItem]]">
<div slot="[[selectedSlot]]"
id="home-tab-panel"
role="tabpanel"
aria-labelledby="home-tab">
<div class="demo-tab-content-style">
<h2>Home page content area</h2>
</div>
</div>
<div slot="tools"
id="tools-tab-panel"
role="tabpanel"
aria-labelledby="tools-tab">
<div class="demo-tab-content-style">
<h1>Tools Area</h1>
</div>
</div>
<div slot="base"
id="base-tab-panel"
role="tabpanel"
aria-labelledby="ba`enter code here`se-tab">
<div class="demo-tab-content-style">
<h1>Base Tab</h1>
</div>
</div>
</oj-switcher>
<br>
<div>
<p class="bold">Last selected list item:
<span id="results">
<oj-bind-text value="[[selectedItem]]"></oj-bind-text>
</span>
</p>
</div>
</div>
JS code below
require(['ojs/ojcontext',
'knockout',
'ojs/ojbootstrap',
'ojs/ojarraydataprovider',
'ojs/ojknockout',
'ojs/ojnavigationlist',
'ojs/ojconveyorbelt',
'ojs/ojdialog',
'ojs/ojbutton',
'ojs/ojinputtext',
'ojs/ojformlayout',
'ojs/ojswitcher',
],
function (Context, ko, Bootstrap, ArrayDataProvider) { // this callback gets executed when all required modules are loaded
function ViewModel() {
this.data = ko.observableArray([{
name: 'Settings',
id: 'settings'
},
{
name: 'Tools',
id: 'tools'
},
{
name: 'Base',
id: 'base'
}
]);
this.selectedSlot = ko.observable('settings'); //Sepecifically mentioned to show what it is the objective
this.dataProvider = new ArrayDataProvider(this.data, { keyAttributes: 'id' });
this.selectedItem = ko.observable('settings');
this.currentItem = ko.observable();
this.tabCount = 0;
this.newTabTitle = ko.observable();
this.delete = (function (id) {
var hnavlist = document.getElementById('hnavlist');
var items = this.data();
for (var i = 0; i < items.length; i++) {
if (items[i].id === id) {
this.data.splice(i, 1);
Context.getContext(hnavlist)
.getBusyContext()
.whenReady()
.then(function () {
hnavlist.focus();
});
break;
}
}
}).bind(this);
this.onRemove = (function (event) {
this.delete(event.detail.key);
event.preventDefault();
event.stopPropagation();
}).bind(this);
this.openDialog = (function () {
this.tabCount += 1;
this.newTabTitle('Tab ' + this.tabCount);
document.getElementById('tabDialog').open();
}).bind(this);
this.closeDialog = function () {
document.getElementById('tabDialog').close();
};
this.addTab = (function () {
var title = this.newTabTitle();
var tabid = 'tid' + this.tabCount;
this.data.push({
name: title,
id: tabid
});
this.closeDialog();
}).bind(this);
}
Bootstrap.whenDocumentReady().then(function () {
ko.applyBindings(new ViewModel(), document.getElementById('tabbardemo'));
});
}
);
It is a bit complex to understand when you copy from JET cookbook. You have done almost everything right. Just make the following changes:
1) Remove this:
Bootstrap.whenDocumentReady().then(function () {
ko.applyBindings(new ViewModel(), document.getElementById('tabbardemo'));
});
Why? The bootstrapping is required once per application, which is done inside your main.js file.
2) Replace require by define
Why? Require block is again maintained in main.js, where your required modules are pre-loaded. All subsequent viewModels have define block
3) Return an instance of your ViewModel
define([
... Your imports
],
function (Context, ko, Bootstrap, ArrayDataProvider) { // this callback gets executed when all required modules are loaded
function ViewModel() {
// Your code
}
return ViewModel;
});
I am using VueJS with Laravel 6.0. What I'm trying to achieve is that to create global variables alertStatus and alertMsg, so that every time when an AJAX call is made, the global variables can be updated to display an alert message to user.
So I decided to use prototype variable for this case. The idea is that when AJAX call is success/fail in User.vue, the prototype variable should be updated, and Alerts.vue should display it accordingly.
However, it seems that the prototype variable display does not update when the data is changed in User.vue component.
I'm not sure if my methods are correct, would like to get some ideas from stackoverflow.
Thanks
main.js
Vue.prototype.$alertStatus = '';
Vue.prototype.$alertMsg = [];
Alerts.vue
<template>
<div class="alert alert-light alert-elevate" role="alert">
<div class="alert-icon">
<i class="flaticon-warning kt-font-brand"></i>
</div>
<div class="alert-text">
{{alertMsg}}
</div>
</div>
</template>
User.vue
<script>
export default {
mounted() {
var datatable = this.init();
datatable.on('kt-datatable--on-ajax-fail', function(event, data){
this.$alertStatus = data.responseJSON.status;
this.$alertMsg = data.responseJSON.msg;
});
},
}
</script>
I would consider using an event handler instead of the global prototype.
Event.js — credit to Jeffrey Way of https://laracasts.com/
class Event {
constructor() {
this.vue = new Vue();
}
fire(event, data = null) {
this.vue.$emit(event, data);
}
listen(event, callback) {
this.vue.$on(event, callback);
}
}
export default Event;
I have outlined the basic usage below, plus I added a v-if to your alert to hide it when not in use.
app.js
import Event from './Event';
window.Event = new Event;
Alerts.vue
<template>
<div v-if="show" class="alert alert-light alert-elevate" role="alert">
<div class="alert-icon"><i class="flaticon-warning kt-font-brand"></i></div>
<div class="alert-text">
{{ alert.msg }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
alert: {},
show: false,
}
},
mounted() {
// listen for a global event
Event.listen('show-alert',alert => {
this.alert = alert;
this.show = true;
});
},
}
</script>
User.vue
<script>
export default {
mounted() {
var datatable = this.init();
datatable.on('kt-datatable--on-ajax-fail', function(event, data){
// fire a global event
Event.fire('show-alert',{
status: data.responseJSON.status,
msg: data.responseJSON.msg,
});
});
},
}
</script>
Axios loads data without any problem, doesn't show any data, Laravel Mix builds without error.
I have following code:
index.html (body)
<div id="app">
<posts></posts>
</div>
In app.js I use this:
import Vue from 'vue';
// global declare axios
window.axios = require('axios');
import Posts from './components/Posts';
Vue.component('posts', Posts);
new Vue({
el: '#app',
props: {
posts:[{
userId: [Number],
id: [Number],
title: [String, Number]
}]
}
});
In the Posts.vue component I create a template and a script loading the data when mounted:
<template>
<ul>
<li v-for="post in posts" v-text="post.title"></li>
</ul>
</template>
<script>
export default {
data: function() {
return {
posts: null,
}
},
// when stuff is loaded (document ready)
mounted: function() {
// use placeholder data for tests, capture asynchronous data from site using this.
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => this.posts = response.posts)
.catch(error => this.posts = [{title: 'No posts found.'}])
.finally(console.log('Posts loading complete'));
},
}
</script>
So the data should be shown as a ul list:
<ul>
<li>
title
</li>
<li>
title
</li>
<li>
title
</li>
</ul>
Try the code below, I've made comments on the bits that need changing.
data() {
return {
posts: [] // this should be an array not null
};
},
// you can do this on created instead of mounted
created() {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
this.posts = response.data; // add data to the response
});
` Here "this.post" not take it has instance in axios call.So you have follow like this. `
var vm=this;
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => vm.posts = response.posts)
.catch(error => vm.posts = [{title: 'No posts found.'}])
.finally(console.log('Posts loading complete'));
I'm having trouble accessing data in Vue component I use prop to pass my data from view to component like this. I'm using Laravel.
<fav-btn v-bind:store="{{ $store }}"></fav-btn>
And my component looks like this:
<template>
<a href="#" class="btn-link text-danger" v-on:click="favorite">
<i v-bind:class="{ 'fa fa-heart fa-2x': isFavorited == true, 'fa fa-heart-o fa-2x': isFavorited == false }" class="" aria-hidden="true"></i>
</a>
</template>
<script>
export default {
props: ['store'],
data(){
return{
isFavorited: this.store.favoritable.isFavorited,
}
},
methods: {
favorite: function () {
this.AjaxRequest();
this.ToggleFav();
},
ToggleFav: function () {
this.isFavorited = !(this.isFavorited);
},
AjaxRequest: function () {
if (this.isFavorited)
{
axios.delete('stores/' + this.store.favoritable_id);
}
else {
axios.post('stores/' + this.store.favoritable_id);
}
}
}
}
</script>
In Vue devtools I can see all the objects in props but I can't access them the isFavorited always stays false. Am I accessing the objects attributes incorrectly?
You are doing it wrong. You shouldn't diractly mutate a value which is in store. You should write a mutator in the store file and change value by that. Here is the docs.
https://vuex.vuejs.org/en/mutations.html
In resources/assets/js/app.js I have created eventHub Vue instance:
require('./bootstrap');
var eventHub = new Vue();
Vue.component('todos-list', require('./components/todos/TodoList.vue'));
Vue.component('todos-add', require('./components/todos/TodoAdd.vue'));
const app = new Vue({
el: '#app'
});
How can I use it in components that are created in separate .vue files?
For example, I also have two components:
todos-list located in /components/todos/TodoList.vue, which is used to fetch the data from server-side using vue-resource:
<template id="todos-list-template">
<div>
<ul v-if="todos.length > 0">
<li v-for="todo in todos">
{{ todo.title }}
</li>
</ul>
<p v-else>You don't hanve any Todos.</p>
</div>
</template>
<script>
export default {
template: '#todos-list-template',
data() {
return {
todos: {}
}
},
mounted() {
this.$http.get('api/vue/todos').then(function(response) {
this.todos = response.data;
});
},
methods: {
handleAddedTodo: function(new_todo) {
this.todos.push(new_todo);
}
},
created: function() {
eventHub.$on('add', this.handleAddedTodo);
},
destroyed: function() {
eventHub.$off('add', this.handleAddedTodo);
}
}
</script>
todos-add located in /components/todos/TodoAdd.vue which is used to add (save) the new 'todo' using vue-resource:
<template id="todos-add-template">
<div>
<form v-on:submit.prevent="addNewTodo()">
<div class="form-group">
<input v-model="newTodo.title" class="form-control" placeholder="Add a new Todo">
</div>
<div class="form-group">
<button>Add Todo</button>
</div>
</form>
</div>
</template>
<script>
export default {
template: '#todos-add-template',
data() {
return {
newTodo: { id: null, title: this.title, completed: false }
}
},
methods: {
addNewTodo() {
this.$http.post('api/vue/todos', { title: this.newTodo.title }).then(function(response) {
if (response.status == 201) {
eventHub.$emit('add', response.data);
this.newTodo = { id: null, title: this.title, completed: false }
}
}, function(response) {
console.log(response.status + ' - '+ response.statusText);
})
}
}
}
</script>
When I add (save) new 'todo' using the todos-add component (TodoAdd.vue) - I want to update data in todos-list component. If I understood well the documentation - for component communication we need to use centralized event hub. And that's what I tried - but I am getting the following error:
eventHub is not defined
I guess because it is defined in app.js, but how can I use in components that are created in separate .vue files?
You are getting this error because eventHub is actually not defined where you are using it. You have to export this from app.js and import in TodoAdd.vue.
in app.js:
var eventHub = new Vue()
exports.eventHub = eventHub
Add this code in TodoAdd.vue:
<script>
import eventHub from '/path/of/app'
export default {
template: '#todos-list-template',
This should make eventHub availble in TodoAdd.vue.
Edited
As the comment suggests, you may consider using vuex, as you have data whcih is being used across components, and going forward I see chances of getting it more complex, more event handlers and event listerners, which can quickly become a nightmare to manage.
var eventHub = new Vue()
You are getting this error because eventHub is actually not defined where you are using it. You have to export this from app.js file. Use this one
window.eventHub = new Vue()