I am really new to Vue. I have multiple pages such as App.vue, Waiting.vue, Reference.vue, Switch.vue and so on. The text defined on **App.vue** is passed along to other pages correctly. But now I dont want to display WELCOME text passed from App.vue to Waiting.vue page. Is there a way that I can hide WELCOME from Waiting.Vue page only?
App.vue
<div id="app">
<b-container>
<b-col lg="5">
WELCOME
</b-col>
</b-container>
</div>
Waiting.vue
<div id="app">
<p class="teamTitle">TEAMS ON DECK</p>
</div>
Ouput for Waiting.vue
WELCOME
TEAMS ON DECK
Let suppose that the Waiting page path is /waiting so you should do :
<div id="app">
<b-container>
<b-col lg="5" v-if="$route.path!=='/waiting'">
WELCOME
</b-col>
</b-container>
</div>
I am assuming that App.vue is acting as parent component and has content that is visible in the page. That being the case, there are multiple ways of hiding information.
If you use a router and Waiting.vue is on a distinct route you can check for route params to selectively hide text. For e.g. in App.vue.
<b-col lg="5" v-if="!this.$route.fullPath === '/waiting'">
WELCOME
</b-col>
If you use global storage like Vuex, just set a variable within Vuex when Waiting.vue is loaded and set the variable to something else in other components
If you are having everything on a single page for any reason, pass a variable as prop and selectively hide the element (similar to [1])
App.vue
<Waiting :hide="true"/>
Waiting.vue
<b-col lg="5" v-if="!hide">
WELCOME
</b-col>
<!-- other code -->
<script>
export default {
props: {
default: false,
type: Boolean,
required: false
}
}
</script>
Related
I am trying to create a dummy vue page, were the different components used in the page like b-field ,b-table etc should be injected into the page in order to make things more dynamic. Currently the fields and components are defined in the template section of the .vue page.
<template>
<div class="container is-fluid">
<b-loading :is-full-page="true" :active.sync="this.isLoading"></b-loading>
<p class="subtitle">Business Unit</p>
<b-field label="Business Unit">
<b-input
required
:disabled="this.newRecord ? false : true"
:value="this.objectData.id"
#input="(newValue)=>{updateValue(newValue,'id')}"
></b-input>
</b-field>
<b-field label="Description">
<b-input
:value="this.objectData.description"
#input="(newValue)=>{updateValue(newValue,'description')}"
></b-input>
</b-field>
<b-field label="Short Description">
<b-input
:value="this.objectData.shortdescription"
#input="(newValue)=>{updateValue(newValue,'shortdescription')}"
></b-input>
</b-field>
<b-field label="Status">
<b-autocomplete
:value="this.objectData.status"
:open-on-focus="true"
:keep-first="true"
:data="['Active','InActive']"
#input="(newValue)=>{updateValue(newValue,'status')}"
></b-autocomplete>
</b-field>
<section>
<p class="is-size-7 has-text-danger">{{submitError}}</p>
<b-button #click="submitForm" class="is-radiusless">Submit</b-button>
<b-button type="is-text" #click="$router.go(-1)" class="is-radiusless">Return</b-button>
</section>
</div>
</template>
<script>
import { viewMixin } from "../viewMixin.js";
const ViewName = "BusinessUnitDetail";
export default {
name: "BusinessUnitDetail",
mixins: [viewMixin(ViewName)],
};
</script>
But the components mentioned in the template section should actually be stored as a string and going forward in the future this string will be retrieved from the database instead. But for the time being and as a starting point , this string can be hardcoded in the script section itself. Now i need a solution or guidance on how to achieve this and make the page to actually work..
Note: Please note that in vue js, i know that we could show or hide components based on the application state using Vue conditional structures such as v-if and v-else. But this is not what iam talking about. Instead i want the components (b-field,b-table etc) to be dynamically injected into the DOM. So in future if there will be an extra b-field or any other component, i can simply append the component tag to the string and that new component will be rendered in the frontend successfully.Plz help?
I guess the solution you look for is vue dynamic components.
So you can do this:
<template v-for="(item, index) of components" :key="index">
<component :is="item.name" :any-prop="item.anyProp">
</template>
...
<script>
// ...
data() {
return {
components: [
{ name: 'b-field', anyProp: 'status' }
]
}
}
</script>
Supposed I am importing a header component on layouts/default.vue
<template>
<div>
<b-container class="mt-5">
<b-row>
<b-col md="6" class="mb-3">
<Header />
</b-col>
<b-col md="6">
<nuxt />
</b-col>
</b-row>
</b-container>
<Header/>
<nuxt/>
</div>
</template>
<script>
import Header from "#/components/Header.vue";
export default {
components: {
Header
}
};
</script>
<style>
...
</style>
and that header will be render on all components.
My question is how can I make the header available on all components except on my Login.vue?
Any idea on where can I start to achieve this.
Solved by reading the documentation on https://nuxtjs.org/guide/views/ layouts section. I created another layout file on layouts folder login.vue and use it on my main login.vue
export default {
layout: 'login' // coming from layouts folder
// page component definitions
}
The current route path is '$route.path',so use 'v-show' to judge.
Good Evening,
I've been working on a issue for about an hour or so, I am kinda new to VueJS (and front end Dev in general).
I am trying to have a deck of cards looping through and object (using Bootstrap-Vue).
When I manually post the cards in they align correctly in groups of 3. the issue is when I iterate through the json object it seems to create one solid column.
Ill post my code (dont mind some of the names this is in a test section, im going to refactor it into a comp once its complete) in case someone wants to take a look. I am going to poke at it some more and Update in case I figure it out before someone.
Thank you in advance
<div class="about">
<h1>Dawning Recipes</h1>
<br />
<b-container>
<b-card-group deck v-for="recipes in data.recipes" :key="recipes">
<b-card
bg-variant="dark"
:header="recipes.name"
class="text-center"
style="max-width: 23rem;"
>
<b-row>
<b-col sm="auto">
<b-img thumbnail fluid :src="recipes.icon" :alt="recipes.name" />
</b-col>
<b-col class="text-left">
<b-list-group>
<b-list-group-item
variant="dark"
v-for="ingredient in recipes.ingredients"
:key="ingredient"
>{{ingredient}}</b-list-group-item>
</b-list-group>
</b-col>
</b-row>
<b-row>
<b-row>
<b-col>
<b-card-text class="text-left ml-2 mt-3 mr-2">{{recipes.delivery}}</b-card-text>
</b-col>
</b-row>
</b-row>
</b-card>
</b-card-group>
</b-container>
</div>
</template>
<script>
import data from "../data/destiny/dawning.json";
export default {
data() {
return {
data: data
};
}
};
</script>```
Hard to say if this is the only issue, since I don't have your files, but one thing immediately sticks out:
<b-card-group deck v-for="recipes in data.recipes" :key="recipes">
:key has to be a unique string value. Since you're using recipes.name below that line, I assume recipes is an object. Vue will call toString() on this, which will always result in a String of "[object Object]", for any object, no matter the contents.
I bet the same key of [object Object] is being used, so Vue is only creating one object there from that loop.
Try using a unique value like :key="recipes.name" (assuming that is unique, ideally you have an id field)
At the very minimum to get it working, you could use index as a key, but that is essentially the same as not using a key at all:
<b-card-group deck v-for="(recipes, index) in data.recipes" :key="index">
Edit:
Just peeking at the Vue source code, it looks like you should be seeing a warning about this. It might be good to work through other warnings in there, if any.
So what i was trying to do is to be able to use my admin page sidebar navigator (i.e. a side bar that has a few tabs for home, maps, user-profiles). So that say when I am on the 'home' tab and when I click on 'user-profiles' it will update the page but not refresh the browser for the new view..
I was thinking about using v-if on my vue.js views page. so that v-if i select 'user-profiles' tab then use this .vue file as the main component or container.
<template>
<v-container>
<Header />
<AppBarAdmin />
<v-layout class="main">
<NavAdmin class="sidebar" />
<v-flex xs12 class="display_container">
<Dashboard class="dashboard" />
</v-flex>
</v-layout>
</v-container>
</template>
so what i was thinking was being able to use a v-if statement on the <Dashboard class="dashboard"> line so that the logic might be 'if clicked on Dashboard' then display this vue file
I am trying to compose a component inside another like this:
<prompt :users="users">
...
<dataset v-for="ds in users" :user="user"></dataset>
...
</prompt>
But apparently I'm not registering it properly:
[Vue warn]: Unknown custom element: <dataset> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in root instance)
Here's how I'm trying to register it:
app.js
Vue.component('prompt', {
props: ['userdata', 'users'],
template: '#prompt-template',
components: {
'dataset': {
props: ['userdataset', 'user'],
template: '#dataset-template',
}
}
});
Finally, the templates:
<template id="dataset-template">
<li>{{ user}}</li>
</template>
<template id="prompt-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" #click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</template>
Are there any steps I'm missing? I can't figure out how the component isn't being registered.
The problem is that you use the dataset component as a slot within the prompt component. While the Vue vm tries to figure out the component tree it will recognize the dataset component which it does not know. Subcomponents are used in the component template but not within slots. You have to register the dataset component within the Vue vm like you did for the prompt component. Try this
Vue.component('promp', { ... })
Vue.component('dataset', { ... })
It also make sense to register the components on the same level since the templates of the components are also registered on the same level (next to each other).
Compare it to the example you mentioned in another answers comment: Here the subcomponent axis-label is only used within the template of the parent polygraph component. This is valid since now the component is in contract to figure out it sub components not the vue-vm.
In other words:
It should be possible to pass components into the slot of any component A which are not subcomponents of A. Therefore all components passed to slots of a component should be available to the vue vm.
Thumb rule could be
if a component does not appear within another components template, it is not a subcomponent.