I'm having trouble using axios(my code will follow) but when i use {{response.data}} the site breaks and gives me a blank page as soon as i remove it, it works alright. I'm not too sure what I'm doing wrong, I'm quite new to using vue, vuetify and axios.
I've got a local server running for the database and the get request link works. it displays 3 columns of strings and 1 array and I'm looking to get the data from the array.
<template>
<v-app id="inspire"
style="background-color: #e4e4e4">
<!-- to be deleted-->
<v-app-bar-nav-icon style="padding-left: 80px">
<div id="app">
<nav>
<router-link to="/">Home</router-link> |
<router-link to="/about">Login</router-link>
<br>
<vbtn>Logout</vbtn>
</nav>
<router-view/>
</div>
</v-app-bar-nav-icon>
<!--end-->
<!-- profiles to login to-->
<v-main style="padding: 10rem">
<v-container>
<v-row>
<v-col
v-for="n in 10"
:key="n"
cols="5"
style="background-color: #e4e4e4;">
<v-card height="200" style="background-color: #a3a3a3; text-align: center">{{n}}</v-card>
</v-col>
</v-row>
</v-container>
</v-main>
<!-- profiles to login to end-->
</v-app>
</template>
<script>
import axios from 'axios'
export default {
name: 'HelloWorld' ,
mounted () {
axios
.get("http://localhost:8081/contractor?user_id=c65722")
.then((response) => {
this.posts = response.data
})
},
data: () => ({
ecosystem: [],
importantLinks: [],
}),
methods: {}
}
</script>
'
Related
I use vuetify to make a kind of carousel to display recipes that are stored in the database.
But I would like when I click on a recipe the carousel opens below a space with all the elements of the recipe in question (the one we clicked on) So I found a component on vuetify that corresponds exactly to what I'm looking for: Here is Vuetify Carousel
But in my v-slide-item I use a loop that retrieves the recipe data but suddenly from the v-expand-transition I no longer have access to this loop how can I display the recipe data suddenly?
Here is the code :
<template>
<v-sheet
class="mx-auto"
elevation="8"
max-width="100%"
style="box-shadow: none !important;"
>
<v-slide-group
v-model="model"
class="pa-4 slider"
show-arrows
>
<v-slide-item
v-for="n in Object.keys(recipes)"
:key="recipes[n].id"
v-slot="{ active, toggle }"
>
<v-card
:color=" 'grey lighten-1'"
class="ma-4 card-recipe"
height="200"
width="200"
style="border-radius: 10px;"
v-bind:style="recipes[n].recipe[0].first_recipes_image != null ? { backgroundImage: 'url(' + recipes[n].recipe[0].first_recipes_image + ')' } : { backgroundImage: 'url(https://cdn.vuetifyjs.com/images/cards/sunshine.jpg)' }"
#click="toggle"
>
<p class="card-text" ><span class="black--text">{{ recipes[n].recipe[0].name }}</span></p>
<v-row
class="fill-height"
align="center"
justify="center"
>
<v-scale-transition>
<v-icon
v-if="active"
color="white"
size="48"
v-text="'mdi-close-circle-outline'"
></v-icon>
</v-scale-transition>
</v-row>
</v-card>
</v-slide-item>
</v-slide-group>
<v-expand-transition>
<v-sheet
v-if="model != null"
height="200"
tile
style="background-color: #FFF8F0 !important;"
>
<v-row
class="fill-height"
align="center"
justify="center"
>
<h3 class="text-h6">
Selected {{ model }}
</h3>
</v-row>
</v-sheet>
</v-expand-transition>
</v-sheet>
</template>
<script>
import { mapGetters } from "vuex";
export default {
props: {
},
data: () => ({
model: null,
recipes: [],
openedCards: [],
}),
computed: {
console: () => console,
...mapGetters({
plantActive: 'permatheque/getPlant',
}),
},
methods: {
async getPlantRecipes() {
this.$axios
.$get("/lnk/plant/recipes?plant_id=" + this.plantActive.id + "")
.then((response) => {
this.recipes = response;
console.log(this.recipes);
})
.catch((error) => {
console.log(error);
});
},
},
mounted() {
this.getPlantRecipes()
}
}
</script>
Hope I was clear enough, thanks!
You can use the v-model of the v-slide-group which is basically the index from recipes array of the selected item in the carousel.
This way you know which recipe is selected, so you can go grab the recipe info from the array or make another api call to get that info.
Example
Check this codesandbox I made: https://codesandbox.io/s/stack-71474788-recipes-carousel-6vm97o?file=/src/components/Example.vue
If you already have the recipe info within your recipes array, all you need to do is use the v-model variable of the v-slide-group which I renamed to recipeIndex to access that data directly from your array.
<v-expand-transition>
<v-sheet v-if="recipeIndex != null" tile style="background-color: #FFF3E0 !important;">
<v-container fluid class="pa-12">
<v-row>
<v-col cols="12" sm="6">
<span class="text-h6">{{ `${recipes[recipeIndex].name}'s Recipe` }}</span> <br>
<span class="text-subtitle-1">{{ recipes[recipeIndex].description }}</span>
<p class="text-justify mt-4">
{{ recipes[recipeIndex].steps }}
</p>
</v-col>
<v-col cols="12" sm="6" class="d-flex align-center justify-center">
<div class="thumbnail">
<img :src="recipes[recipeIndex].image" alt="Beach Scene" style="width: 100%;" />
</div>
</v-col>
</v-row>
</v-container>
</v-sheet>
</v-expand-transition>
If you need to get the info from a secondary api call. You can set up a watcher on the recipeIndex variable to obtain the recipe info everytime it changes.
I have this structure:
components
Login.vue
layouts
default.vue
middleware
authenticated.js
Pages
index.vue
Is there somethin form that Redirect to the Login component from middleware/authenticated.js?
I have this code in default.vue, from where I do the Login.vue import.
<template>
<v-app dark>
<div v-if="$auth.loggedIn" >...
<!-- Contenido del Main -->
<v-main>
<v-container>
<nuxt />
</v-container>
</v-main>
</div>
<div v-else>
<!-- Page Login Component-->
<Login />
</div>
</v-app>
</template>
<script>
import Login from "~/components/Login"
export default {
components: {
Login,
},
}
</script>
I don't have this idea, because in the page They use it like this
if (!store.state.authenticated) {
return redirect('/login')
}
could someone explain to me?
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 ?
I'm trying to present the data coming from my API using VUEX and AXIOS, however on my screen nothing appears as shown in the image:
But in console.log the data appears:
In Vue dev tools it appears as follows:
I tried different ways but due to my little experience I was not successful and I would like a help.
Follow my codes:
Clients.vue
<template>
<!-- Inicio do CONTAINER principal -->
<v-container fluid>
<v-row
justify="center"
>
<!-- Inicio do BLOCO principal -->
<v-col
md="9"
xs="12"
>
<nav-bar />
<v-card
class="mx-auto"
flat
height="900"
>
<v-list-item three-line>
<v-list-item-content>
<v-list-item-title class="display-1 font-weight-black">{{ pageName }}</v-list-item-title>
</v-list-item-content>
<!-- Inicio BLOCO button actions -->
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="success"
depressed
large
>
New Client
</v-btn>
</v-card-actions>
<!-- Final BLOCO button actions -->
</v-list-item>
<!-- Inicio COMPONENTE TAB -->
<v-card
flat
tile
>
<v-col>
<v-tabs>
<v-tab class="text-capitalize">Search</v-tab>
<v-tab class="text-capitalize">Dashboard</v-tab>
<v-tab-item>
<v-divider></v-divider>
<!-- Início BLOCO Table-->
<v-card
flat
tile
>
<v-col
justify="center"
>
<v-col
md="5"
>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
outlined
dense
class="pt-3"
></v-text-field>
</v-col>
<v-data-table
:headers="headers"
:items="clients"
:search="search"
></v-data-table>
</v-col>
</v-card>
<!-- Final BLOCO Table-->
</v-tab-item>
</v-tabs>
</v-col>
</v-card>
<!-- Final COMPONENTE TAB -->
</v-card>
</v-col>
<!-- Final do BLOCO principal -->
</v-row>
</v-container>
<!-- Final do CONTAINER principal -->
</template>
<script>
import { mapState} from 'vuex';
const state = mapState(['clients']);
export default {
name: 'Clients',
computed: state,
data: () => ({
pageName: 'Clients',
search: '',
headers: [
{ text: 'Name', value: 'firstName' },
{ text: 'Phone', value: 'phone' },
{ text: 'E-mail', value: 'email' },
],
}),
created () {
this.initialize()
},
methods: {
initialize () {
//console.log(this.$store)
this.$store.dispatch('loadData') // dispatch loading
},
},
}
</script>
store/modules/client.module.js
import axios from 'axios'
const URL = 'http://192.168.15.11:3000/clients';
const client = {
state: () => ({
clients: [],
loading: true
}),
mutations: {
updateClients(state, clients) {
state.clients = clients
},
changeLoadingState(state, loading) {
state.loading = loading
}
},
actions: {
loadData({commit}) {
axios.get(URL).then((response) => {
console.log(response.data, this)
commit('updateClients', response.data)
commit('changeLoadingState', false)
})
}
},
getters: {
//
}
}
export default client;
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth.module'
import client from './modules/client.module'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
auth:auth,
client:client,
},
})
Note: The authentication part is working perfectly in this form of store modules
Hii I am working on the Vue.js template and I stuck at a point where I need to show dynamic v-dialog using looping statement but now it shows all.
Dom:
<template v-for="item of faq">
<div :key="item.category">
<h4>{{ item.heading }}</h4>
<div v-for="subitems of item.content" :key="subitems.qus">
<v-dialog
v-model="dialog"
width="500"
>
<template v-slot:activator="{on}">
{{subitems.qus}}
</template>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Privacy Policy
</v-card-title>
<v-card-text>
{{ subitems.ans }}
</v-card-text>
<v-divider></v-divider>
</v-card>
</v-dialog>
</div>
</div>
</template>
Script:
export default {
data: () => ({
faq,
dialog:false,
}),
}
I do not understand how I can do this. If I click on one button then it shows all.
There must a design a pattern for this one but a quick solution would be to create array of booleans for v-models of dialogs. something like below
export default {
data: () => ({
faq,
dialog: [] // Array instead of Boolean.
}),
}
and
<template v-for="item of faq">
<div :key="item.category">
<h4>{{ item.heading }}</h4>
<div v-for="(subitems, index) of item.content" :key="subitems.qus">
<v-dialog
v-model="dialog[index]"
width="500"
>
<template v-slot:activator="{on}">
{{subitems.qus}}
</template>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
Privacy Policy
</v-card-title>
<v-card-text>
{{ subitems.ans }}
</v-card-text>
<v-divider></v-divider>
</v-card>
</v-dialog>
</div>
</div>
</template>
Brother, you are doing a very small mistake, you should not keep your v-dialog component inside your loop, take this out from loop block and don't take dialog as empty array keep it false.