I'm trying to use flow-router to render templates within a template based on nested routes. Rereading that confused me so I'll give an example.
Main Container:
<body>
<header>
<div id="headerRight">
<span class="headerButton" id="teachButton">Teach</span>
</div>
</header>
<div class="container" style="padding: 50px;">
{{> mainLayout}}
</div>
</body>
<template name="mainLayout">
<main>
{{>Template.dynamic template=main}}
</main>
</template>
Main Container JS:
FlowRouter.route('/', {
action: function() {
BlazeLayout.render("mainLayout", {main: "base"});
}
});
FlowRouter.route('/createCourse', {
action: function() {
BlazeLayout.render("mainLayout", {main: "courseChooseCont"});
}
});
Nested Routes:
<template name="courseChooseCont">
<header>
<i class="fa fa-times" aria-hidden="true"></i>
</header>
<ul>
<li>Category</li>
<li>Availability</li>
<li>Simple Availability</li>
</ul>
{{> courseLayout}}
<div name="courseMain"></div>
<div class="bottomBar">
<div class="back">Back</div>
<div class="next">Next</div>
</div>
</template>
<template name="courseLayout">
<main>
{{>Template.dynamic template=content}}
</main>
</template>
Nested Routes JS:
var createCourse = FlowRouter.group({
prefix: '/createCourse'
});
createCourse.route('/', {
action: function() {
BlazeLayout.render("courseLayout", {content: "base"});
}
});
createCourse.route('/availabilityCheck', {
action: function() {
BlazeLayout.render("courseLayout", {content: "availabilityCheck"});
}
});
createCourse.route('/simpleAvailability', {
action: function() {
BlazeLayout.render("courseLayout", {content: "simpleAvailability"});
}
});
When I render the nested routes it seems to overwrite the "courseChooseCont" template that should be housing the nested template and is simply displaying the nested template inside the 'Main Container'.
I'm assuming I'm using BlazeLayout wrong but I can't seem to find a solution.
Related
I have a web app which shows the blog posts in a grid. But the BlogCards component in the Home.vue just outputs nothing, whereas it should output the blogs in a grid format. All the datas are stored in firebase. If I go to /blogs, I can see the blogs in grid format, but it doesn't work on the Home.vue. It also spits out the Vue Warn: property or method "blogPostsCards" is not defined on the instance but referenced during render.
I took this code from this tutorial at 5:31:05 minute mark.
Any solution to this problem.
Home.vue
<template>
<div class="home">
<BlogPost :post="post" v-for="(post, index) in blogPostsFeed" :key="index" />
<div class="blog-card-wrap">
<div class="container">
<h3>View more recent blogs</h3>
<div class="blog-cards">
<BlogCards :post="post" v-for="(post, index) in blogPostsCard" :key="index" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BlogPost from '../components/BlogPost.vue'
import BlogCards from '../components/BlogCards.vue'
export default {
name: "Home",
components: {
BlogPost,
BlogCards,
Arrow
},
computed : {
blogPostsCards() {
return this.$store.getters.blogPostsCards;
},
blogPostsFeed() {
return this.$store.getters.blogPostsFeed;
},
}
};
</script>
BlogCards.vue
<template>
<div class="blog-card">
<img :src="post.blogCoverPhoto" alt="">
<div class="info">
<h4>{{ post.blogTitle }}</h4>
<h6>Posted on: {{ new Date(post.blogDate).toLocaleString('en-us', {dateStyle: "long"})}}</h6>
<router-link class="link" to="#" >
View Post <Arrow class="arrow" />
</router-link>
</div>
</div>
</template>
<script>
export default {
name: "blogCard",
props: ["post"],
computed: {
editPost() {
return this.$store.state.editPost
},
}
}
</script>
And getter function in store/index.js
getters:{
blogPostsFeed(state){
return state.blogPosts.slice(0,2);
},
blogPostsCards(state) {
return state.blogPosts.slice(2,6);
},
},
<BlogCards :post="post" v-for="(post, index) in blogPostsCard" :key="index" />
In your Home.vue >> change blogPostsCard to blogPostsCards because you use blogPostsCards in your computed so it gives you that error.
I need an equivalent of jQuery "this.find()" to get child element from this section on click.
So on click="showProd(6) I want to find "this .dropProd" inside a method ":
Image
<div class="sections" #click="showProd(6)">
<h2 class="padding-10">Limited Shelf Life</h2>
<div class="dropProd" :class="{ activate : active_el == 6}">
<div v-for="item in shelf" :key="item.id" class="niceBox">
<p class="prod_title">{{item.title}}</p>
<p class="prod_info">{{item.product_details}}</p>
</div>
</div>
</div>
You can use $refs:
<div class="sections" #click="showProd(6)">
<h2 class="padding-10">Limited Shelf Life</h2>
<!-- note the ref attribute below here -->
<div ref="dropProd" class="dropProd" :class="{ activate : active_el == 6}">
<div v-for="item in shelf" :key="item.id" class="niceBox">
<p class="prod_title">{{item.title}}</p>
<p class="prod_info">{{item.product_details}}</p>
</div>
</div>
</div>
Access it in <script> via this.$refs.dropProd
You could just use this.$refs with an appropriate reference name inside your function like this:
new Vue({
el: '#app',
data: function() {
return {
}
},
methods: {
showProd(){
console.log(this.$refs.referenceMe);
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="sections"style="background-color: red" #click="showProd(6)">
<h2 class="padding-10">Limited Shelf Life</h2>
<div class="dropProd" ref="referenceMe">
</div>
</div>
</div>
First project in Vue.js. Working with WP REST API.
I am able to get all my posts to show, but as soon as I try to implement the Vue-router my component that shows all the posts, home-post-list, dies at the first v-if="posts" statement.
Clearly, Vue thinks there is no posts so it isn't rendering anything else, but I cannot figure out how to make it recognize posts. I don't get any errors in the console.
WhenI look at the Vue DevTools, I see:
https://www.dropbox.com/s/5441k1kw8ocmzad/Screenshot%202018-05-22%2010.43.24.png?dl=0
So, the router-view appears to be working properly, but props is empty. I thought I was passing props from the main instance to the child component but maybe I am doing something wrong here.
I will show you my current code.
***HomePostList component
const HomePostList = Vue.component('home-post-list', {
props:['posts'],
template: `<div class="cell medium-8">
<div id="all-posts" class="all-posts" v-if="posts">
<div class="grid-x grid-margin-x">
<div class="post medium-6 cell" :class="{'medium-12':index===0}" v-for="(post,index) in posts">
<div class="img-bg" :class="{'first-post':index === 0}" :style="'background-image: url(' + post._embedded['wp:featuredmedia']['0'].source_url + ')'"></div>
<aside class="post-meta grid-x">
<div class="cell small-12">
<h3>{{ post.title.rendered | limitWords(6) }}</h3>
</div>
<div class="cell small-6">
<div class="post-category" v-for="(category,index) in post.cat_name.slice(0,1)">
<a :href="'/category/' + category.slug">{{ category.cat_name }}</a>
</div>
</div>
<div class="cell small-6">
<p><i class="fal fa-calendar-alt"></i> {{ post.date | parseTime }}</p>
</div>
</aside>
</div>
</div>
</div>
</div>`
});
***SinglePost Component
const SinglePost = Vue.component('single-post-template', {
props:['posts'],
template: `<div class="cell medium-8">
<div class="grid-x grid-margin-x">
<p>Single Post here</p>
</div>
</div>`
});
***Routes & Vue Instance
const routes = [
{
path: '/',
component: HomePostList,
props: true
},
{
path: '/post/:postId',
name: 'post',
component: SinglePost
}
];
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
data() {
return{
posts: [],
searchTerm:'',
searchPosts:[],
currentRoute: window.location.pathname
}
},
created (){
var $this = this;
axios
.get(apiRoot + 'posts?_embed')
.then(function (response) {
$this.posts = response.data;
}
)
},
methods: {
loadMorePosts: function(){
var $this = this;
axios
.get(apiRoot + 'posts?_embed')
.then(function (response) {
$this.posts = response.data;
}
)
},
},
computed:{
},
});
***index.php
<?php
/*
Template Name: Front
*/
get_header(); ?>
<!-- Home Page -->
<div class="grid-container">
<div class="grid-x grid-margin-x">
<!-- Main Post Container -->
<router-view></router-view>
<!-- Sidebar -->
<div id="sidebar" class="cell medium-4">
<sidebar-search></sidebar-search>
</div>
</div>
</div>
<?php get_footer();
I got this working by adding posts to the router-view element.
<router-view :posts="posts"></router-view>
Not sure if this is the correct way to do this, but it works.
I am trying to check my variable is empty. I think my code looks fine.
But it is not working..
Current my vue.js version is 2.5.13
Below is my code
<template>
<div v-if="Object.keys(this.myValues).length === 0">
is empty
</div>
<div v-else>
good
</div>
</template>
<script>
export default {
data: function() {
return {
myValues: new Object()
};
}
};
</script>
This is the working example data refers to current template so remove this
var app = new Vue({
el: '#el',
data: function() {
return {
myValues: new Object(),
another: {some:'value'}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="el">
<div v-if="Object.keys(myValues).length === 0">
myValues is empty
</div>
<div v-else>
myValues have some element
</div>
<div v-if="Object.keys(another).length === 0">
Another is empty
</div>
<div v-else>
Anoter have some element
</div>
</div>
I can get the "Help Topics" title to render, but none of the FIXTURES that I've defined. Nothing in the {{#each model}} will render. This is my first time working with Ember, so anything (literally anything) will help as I'm not receiving any error messages in the browser debugger.
App.js
App.Router.map(function () {
this.resource('home', { path: "/Index" });
this.resource('agents', { path: "/Agents" });
this.resource('topics', function() {
this.resource('topic', {path: '/topic/:topic_id'})
});
this.resource('contacts', { path: "/Contacts" });
});
App.TopicRoute = Ember.Route.extend({
model: function () {
return App.Topic.find();
}
})
App.Topic = DS.Model.extend({
title: DS.attr('string'),
info: DS.attr('string')
});
App.Topic.FIXTURES = [{
id: 1,
title: "Periscope",
info: "Periscope is a read-only application pulling information from D3."
}, {
id: 2,
title: "Second post",
info: "ASP.NET MVC 4 is a framework for building scalable, standards-based web applications using well-established design patterns and the power of ASP.NET and the .NET Framework."
}, {
id: 3,
title: "Ember.js",
info: "Ember.js is designed to help developers build ambitiously large web applications that are competitive with native apps."
}];
View
<script type="text/x-handlebars">
<div class="navbar">
<div class="navbar-inner">
<ul id="menu">
<li>{{#linkTo 'home'}}Home{{/linkTo}}</li>
<li>{{#linkTo 'agents'}}Agents{{/linkTo}}</li>
<li>{{#linkTo 'topics'}}About{{/linkTo}}</li>
<li>{{#linkTo 'contacts'}}Contact{{/linkTo}}</li>
</ul>
</div>
</div>
{{outlet}}
</script>
<script type="text/x-handlebars" id="topics">
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<table class='table'>
<thead>
<tr><th>Help Topics</th></tr>
</thead>
{{#each model}}
<tr><td>
{{#linkTo 'topic' this}}{{title}} {{/linkTo}}
</td></tr>
{{/each}}
</table>
</div>
<div class="span9">
{{outlet}}
</div>
</div>
</div>
</script>
<script type="text/x-handlebars" id="topic">
<h1>{{title}}</h1>
<div class="intro">
{{info}}
</div>
</script>
Try to change your route like this:
App.TopicsRoute = Ember.Route.extend({
model: function () {
return App.Topic.find();
});
Hope it helps.