I'm working on a project where I am receiving data from a websocket and then parsing it into an appropriate UI. The problem I'm running into is when I try and toggle the "Components" of a specific "Agent", the show/hide functionality isn't working properly. Right now I have an "AgentsButton" component that lives inside of the "Config" component, when I applied the same logic in the Config (parent) component it worked fine, but for some reason the child component is not doing what I want it to do. Here is the code I have for the child ("AgentsButton") Component.
<template>
<div>
<b-row id="agentRow">
<b-col v-for="agent in agents" md="auto">
<b-button class="agentButton" #click="compVisible = true">{{ agent.name }}</b-button>
<b-container v-if="compVisible" id="componentsDiv">
<h3>Component-Types</h3>
<div v-for="item in agent.componentTypes">
<b-row>
<b-col md="12">
<b-button type="button" class="componentItem" #click="openModal(item)">
{{ item }}
</b-button>
</b-col>
</b-row>
</div>
</b-container>
</b-col>
</b-row>
</div>
</template>
<script>
export default {
name: 'AgentButtons',
components: {},
props: ['agents', 'components'],
data() {
return {
compVisible: false,
};
},
methods: {
clickEvent() {
this.$emit('clicked');
console.log('clickEvent');
},
showComponents() {
this.compVisible = true;
console.log(`compVisible: ${this.compVisible}`);
},
},
};
</script>
Any help on this issue would be greatly appreciated. Thanks!
Related
Below is the parent component and child component. I am trying to access tabs_value data in the parent component from the child component but it is returning as undefined.
this.$parent.tabs_value returns as undefined when I try to access it inside the run method in the child component.
Please help me find where I am going wrong? Below is the code
Parent Component
<template>
<div>
<v-layout row wrap>
<v-flex xs12 sm12 lg12>
<div>
<v-card>
<v-tabs v-model="tabs_value"
color="black"
centered
show-arrows
>
<v-toolbar-title>Custom</v-toolbar-title>
<v-spacer></v-spacer>
<v-tab href="#build">Build</v-tab>
<v-tab href="#run">Run</v-tab>
</v-tabs>
<v-tabs-items v-model="tabs_value">
<v-tab-item value="#build" id="build">
<Build ref="build_reports" />
</v-tab-item>
<v-tab-item value="#run" id="run">
<Run :reports="reports" ref="run_reports" />
</v-tab-item>
</v-tabs-items>
</v-card>
</div>
</v-flex>
</v-layout>
</div>
</template>
<script>
import Build from 'views/build.vue'
import Run from 'views/run.vue'
import URLs from 'views/routes'
export default {
components: {
Build,
Run
},
data: function() {
return {
tabs_value: 'build',
isLoaded: true,
reports: []
}
},
created() {
this.fetch();
},
methods: {
fetch() {
this.$axios.get(URLs.REPORTS_URL)
.then(response => {
this.reports = response.data
});
}
}
};
</script>
Child Component run.vue
<template>
<div>
<v-layout row wrap>
<v-flex xs12 sm12 lg12>
<div>
<v-card>
<div>
<v-data-table
:headers="headers"
:items="reports"
hide-default-footer
:mobile-breakpoint="0">
<template slot="item" slot-scope="props">
<tr>
<td>{{props.item.name}}</td>
<td>
<div>
<v-tooltip attach left>
<template v-slot:activator="{ on, attrs }">
<a v-bind="attrs" v-on="on"
class="" href='javascript:void(0);'
#click="run(props.item)"><i small slot="activator" dark color="primary" class="fas fa-play"></i></a>
</template>
<span>Run</span>
</v-tooltip>
</div>
</td>
</tr>
</template>
<template slot="no-data" >
<v-alert id='no-data' :value="true" color="error" icon="warning">
No Reports Yet
</v-alert>
</template>
</v-data-table>
</div>
</v-card>
</div>
</v-flex>
</v-layout>
</div>
</template>
<script>
import URLs from 'views/routes'
export default {
props: ['reports'],
data: function() {
return {
headers: [
{ text: 'Name', value: 'name', sortable: false },
{ text: 'Actions', sortable: false }
],
}
},
methods: {
run(report) {
debugger
// this.$parent.tabs_value returns as undefined
}
}
}
</script>
you can use component events i.e $emit.
Below is example which will tell you how to use $emit. (https://vuejs.org/guide/components/events.html#emitting-and-listening-to-events)
Parent Component
<template>
<ChildComponent #updateTabsValue="updateTabsValue"/>
</template>
<script>
export default {
data(){
return {
tabsValue: 'tabs',
};
},
methods:{
updateTabsValue(val){
this.tabsValue = val;
}
},
}
</script>
Child Component
<template>
<button #click="$emit('updateTabsValue','newVal')"/>
</template>
I'm building an vue2.js app, which gets data from an API and shows it within an vuetify data-iterator and on a leaflet map.
The App.vue component handles the communication between the other components (FilterPanel, ListPanel and MapPanel) ...
<template>
<div id="app">
<v-app id="inspire">
<v-app>
<v-navigation-drawer app width="26em" class="pb-16 pb-lg-0">
<FilterPanel #change="getData" />
</v-navigation-drawer>
<v-sheet id="widget-panel" app class="open" :elevation="8">
<v-container
class="grey lighten-5 scrollContainer"
style="display: flex; overflow-y: auto; flex: 1"
>
<ListPanel :loading="loading" :data="data">
<template #card="{ data }">
<DataCard :data="data" :id="'data' + data.id"></DataCard>
</template>
</ListPanel>
</v-container>
</v-sheet>
<v-main>
<MapPanel :loading="loading" :data="data" />
</v-main>
</v-app>
</v-app>
</div>
</template>
.. and the the API call to get the data.
...
methods: {
getData() {
this.loading = true;
fetch("https://jsonplaceholder.typicode.com/posts")
.then((response) => response.json())
.then((json) => (this.data = json))
.finally(() => (this.loading = false));
},
},
...
Within the ListPanel.vue component an slot is defined, so it can be used somewhere else with other data visualization.
<template>
<v-data-iterator
no-results-text="no - data"
loading="loading"
loading-text="loading - data"
no-data-text="no - data"
:items="data"
hide-default-footer
disable-pagination
>
<template v-slot:default="props">
<v-row>
<v-col v-for="item in props.items" :key="item.id" cols="12">
<slot name="card" :data="item">
no slot provided
</slot>
</v-col>
</v-row>
</template>
</v-data-iterator>
</template>
<script>
export default {
name: "ListPanel",
props: ["data", "loading"],
};
</script>
The MapPanel.vue component shows all data entries on the map with clickable markers, which will open popups to show some information about the data. The map also holds an loading indicator (v-progress-linear) to show if data is loading or not.
<template>
<l-map
id="map"
ref="myMap"
:style="styleObject"
v-if="showMap"
:zoom="zoom"
:center="center"
:options="mapOptions"
>
<v-progress-linear
style="z-index: 800 !important"
:indeterminate="loading"
:active="loading"
absolute
top
color="info"
></v-progress-linear>
<l-tile-layer :url="url" :attribution="attribution" />
<l-control-zoom position="bottomright"></l-control-zoom>
<l-marker
v-for="(item, index) in markers"
:key="'marker-' + index"
:lat-lng="item.location"
>
<l-popup :options="getPopupOptions(item.id)">
<DataCard :data="item" showRequest flat></DataCard>
</l-popup>
</l-marker>
</l-map>
</template>
For better visual representation I'm using an reusable component (DataCard) with v-card to show the necessary data.
I have setup a simplified version of the app. https://codesandbox.io/s/sleepy-hoover-s5w5l
Loading the app or getting the data, let the app freezes for some seconds. You'll see it at the progress bar on the top. The animation stops!
I figured out, that the v-card component is slowing down the whole app. If I remove the card component entirely, loading the data seems to work just fine.
Getting the data from the API isn't the problem, since getting the data from it is very fast.
Vue DevTools Extension within FireFox shows Problems with the Map Markes and the DataCard component.
So I'm asking, what I'm doing wrong with the DataCard Component ?
As mentioned above I'm trying to generate a route that is based on the property : assetId of the objects asset stored in a vuex state.
${asset.assetId} does not work and I do not find a suitable solution. How to define the route properly?
<script>
import { mapState } from 'vuex'
export default {
data () {
return {
selectionVariants: [
'All',
'Portfolio'
]
}
},
computed: {
...mapState(['portfolio'])
}
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div class="container">
<div id="intro">
<h1>Portfolio</h1>
<p>Here your actual deposits are shown.</p>
</div>
<b-form-group label="Selection Filter" label-for="table-style-variant" label-cols-lg="2">
<b-form-select
v-model="tableVariant"
:options="selectionVariants"
id="table-style-variant"
>
<template #first>
<option value="">Choose a selection</option>
</template>
</b-form-select>
</b-form-group>
<b-table striped hover :items="portfolio">
<template #cell(assetName)="asset">
<router-link :to="`/market/${asset.assetId}`">
{{ asset.value }}
</router-link>
</template>
</b-table>
</div>
</template>
The slot data is not the asset, there is other information inside of it:
<template #cell(assetName)="slotData">
<router-link :to="`/market/${slotData.item.assetId}`">
{{ slotData.value }}
</router-link>
</template>
slotData.item is the asset object
I need a vertical navbar to the left of my app's layout, and with the content all across the right.
As it stands, I can't do that. My navbar pushes all the content down. How can I fix this?
This is what my App.vue's template looks like:
<template>
<div id="app">
<v-app>
<navbar/>
<v-main>
<v-container class="main-container">
<router-view/>
</v-container>
</v-main>
</v-app>
</div>
</template>
For the navbar component I am using vuetify, specifically the mini navbar
As per the example code, here is what it currently looks like:
<template>
<v-navigation-drawer
v-model="drawer"
:mini-variant.sync="mini"
permanent
>
<v-list-item class="px-2">
<v-list-item-avatar>
<v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>
</v-list-item-avatar>
<v-list-item-title>John Leider</v-list-item-title>
<v-btn
icon
#click.stop="mini = !mini"
>
<v-icon>mdi-chevron-left</v-icon>
</v-btn>
</v-list-item>
<v-divider></v-divider>
<v-list dense>
<v-list-item
v-for="item in items"
:key="item.title"
link
>
<v-list-item-icon>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>{{ item.title }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
#Component<Navbar>({})
export default class Navbar extends Vue {
private value: string = 'home';
private drawer: boolean = true;
private items: Array<Object> = [
{ title: 'Home', icon: 'mdi-home-city' },
{ title: 'My Account', icon: 'mdi-account' },
{ title: 'Users', icon: 'mdi-account-group-outline' }
]
private mini: boolean = true;
}
</script>
As mentioned on the top, this is still just pushing all the app's content down. This is what it currently looks like:
What can I do so that on the left I have my navbar but on the right
Edit: For the sake of clarification, I do want the navbar to be vertical, but I just don't want it to push down all the content. Basically I want my app to have a side navigation
Wrap the navbar and main in a <v-row>:
<template>
<div id="app">
<v-app>
<v-row>
<navbar/>
<v-main>
<v-container class="main-container">
<router-view/>
</v-container>
</v-main>
</v-row>
</v-app>
</div>
</template>
By default, v-app has an internal wrapper with flex-direction: column CSS, meaning that its child elements are placed vertically. By wrapping these 2 child elements in a v-row, you place them in a wrapping element with flex-direction: row.
I guess you are misunderstanding the concepts. You are wrapping a v-navigation-drawer inside a navbar component.
In Vuetify v-navigation-drawer is a component used to build Sidebars and that's why your component is on vertical.
You should try to use v-app-bar instead. Here's the documentation: https://vuetifyjs.com/en/components/app-bars/
Edit 1
You can configure an app sidebar or an app navbar using the app option inside the component like that:
<v-navigation-drawer
app
>
...
</v-navigation-drawer>
Just like in the official documentation. If you do it that way, the component will work properly and your content will not be pushed down.
I am using Vuetify 1.5 and Vuetify grid system to set up my layout. Now i have a component HelloWorld which i am importing into my Parent Component. I have set up the layout in my HelloWorld and i am trying to display my cards in a single row instead having all of them show up in a column. I am not sure what i am doing wrong here.
I have setup the <v-layout align-center justify-center row fill-height class="mt-5"> which should render it in one row.
Check out this working CodeSandbox.
I am not adding my Vuex store below since the problem is in the layout and not the data itself. The store is minimal and is in the link above.
This is my HellWorld Component:-
<template>
<v-layout align-center justify-center row fill-height class="mt-5">
<v-flex xs4>
<v-card class="mx-4">
<v-img :src="src"></v-img>
<v-card-title primary-title>
<div>{{title}}</div>
</v-card-title>
</v-card>
</v-flex>
</v-layout>
</template>
<script>
export default {
name: "HelloWorld",
props: {
title: String,
src: String,
id: Number
},
data() {
return {};
}
};
</script>
And this is my Parent component:-
<template>
<v-container>
<v-layout align-center justify-center row fill-height class="mt-5">
<h2>Parent Component</h2>
</v-layout>
<draggable v-model="draggableCards">
<template v-for="(tech,i) in getCardArray">
<HelloWorld :src="tech.src" :title="tech.title" :key="i"/>
</template>
</draggable>
</v-container>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import HelloWorld from "./HelloWorld";
import draggable from "vuedraggable";
export default {
components: {
draggable,
HelloWorld
},
computed: {
...mapGetters({
getCardArray: "getCardArray"
}),
draggableCards: {
get() {
return this.$store.state.cardArray;
},
set(val) {
this.$store.commit("setCardArray", val);
}
}
},
methods: {
...mapMutations({
setCardArray: "setCardArray"
})
}
};
</script>
Basically i am trying to show the cards in a row instead of a column. Any help will be appreciated. Thank you :).
You are looping through <v-layout> this means you are creating a new line (layout) for each card. You need to take the layout out of the loop put in the parent and they will be more than one on one row.
Something like:
<draggable v-model="draggableCards">
<v-layout>
<template v-for="(tech,i) in getCardArray">
<HelloWorld :src="tech.src" :title="tech.title" :key="i"/>
</template>
</v-layout>
</draggable>
And remove from HelloWorld