Trying to pass internal links in my template, but it does not direct to the links.
<nuxt-link
to="blog.url"
>{{ blog.title }} by {{ blog.author }}</nuxt-link
>
And in my data I have this (where blog.title and blog.author correctly work)
data() {
return {
blog: [
{ url: '/blog1', title: 'my first title', author: 'Brad' },
{ url: '/blog2', title: 'my second title', author: 'James' },
{ url: '/blog3', title: 'my third title', author: 'Tom' }
]
}
}
The output from the nuxt-link is simply "blog.url" and does not route anywhere. How to make it route to my internal links specified per blog1, blog2, blog3?
You want :to, not to. Without the colon, you’re pointing to the string “blog.url”, not your data.
Related
I have a data-table using Vuetify that passes a localAuthority prop from a rails backend. It all works really well until I pass an empty child association (nested attribute). In this case 'county':
<script>
import axios from "axios";
export default {
name: 'LocalAuthorityIndex',
props: {
localAuthorities: {type: Array, default: () => []},
counties: {type: Array, default: () => []},
localAuthorityTypes: {type: Array, default: () => []}
},
data() {
return{
search: '',
dialog: false,
testmh: 'hello',
dialogDelete: false,
headers: [
{ text: 'Name', align: 'start', value: 'name' },
{ text: 'ONS Code', value: 'ons_code' },
{ text: 'ID', value: 'id' },
{ text: 'Population', value: 'population' },
{ text: 'county', value: 'county.name' },
{ text: 'Website', value: 'website' },
{ text: 'Actions', value: 'actions', sortable: false },
],
So in the example above it works as long as all records have a county association (belongs_to). However, if one record does not have a 'county' associated with it then I get the following error:
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'name')"
I have tried lots of things like adding in a conditional statement like below:
{ text: 'county', value: ('county.name' ? 'county.name' : nil )},
But nothing seems to work.
According to your <v-data-table> code at Codepen, I see that you are overriding default table item slots with your own.
Your error are from this part of code:
...
<template #item.county.name="{ item }">
<a :href="'/counties/' + item.county_id">
{{ item.county.name }}
</a>
</template>
...
Take a look at first string. #item.county.name is a short form of v-slot:item.county.name and comes from one of your strings in headers array:
...
{ text: 'county', value: 'county.name' },
So there's no error, this part are correctly parsed by vuetify library even when your item will not contain any county.
The error is in 3rd string of the above code. You are trying to print name of county without checking its existence. That's why you are getting ...Cannot read properties of undefined... error.
I guess you may fix your issue this way:
<template #item.county.name="{ item }">
<a :href="'/counties/' + item.county_id">
{{ item.county ? item.county.name : 'No name' }}
</a>
</template>
Of course, if you need to hide your link to counties in this case, you may also add v-if (or v-show) into a tag.
I also created a small Codepen with some static data. Take a look into item.name.text slot in this playground, maybe it will help you to understand similar object associations.
I'm quite new to Vuejs, so Sorry in advance!
I have a component called "Goods" which shows all the items in a route path ("/Goods") and another component called "AddGoods" at ("/AddGoods") which is a form and submits data to my database table.
I have to use two separate pages for these two and they work closely together.
now I also want to be able to use my AddGoods form for editing and showing details on my already added Goods and I'm having trouble finding a way to send some parameter with the link so that I could manage my field and buttons based on each situation (like making fields readonly for showing details and so on).
here's my route.js :
{
path: "/addGoods",
name: "add goods",
meta: {
title: "Add Goods",
},
component: () => import("../views/GoodsManagment/AddGoods.vue"),
},
{
path: "/goodsTbl",
name: "goods tbl",
meta: {
title: "Goods Table",
},
component: () => import("../views/GoodsManagment/GoodsTbl.vue"),
},
and here's the link to "AddGoods" :
<v-btn v-on="click" href="/AddGoods"> Add a new item </v-btn>
So I ended up doing it like this :
route.js:
{
path: "/addGoods/:id",
name: "add goods",
meta: {
title: "Add Goods",
},
component: () => import("../views/GoodsManagment/AddGoods.vue"),
},
{
path: "/goodsTbl",
name: "goods tbl",
meta: {
title: "Goods Table",
},
component: () => import("../views/GoodsManagment/GoodsTbl.vue"),
},
and to call it , I personally found the Programmatic Navigation easier to use, so :
this.$router.push({name: "add goods", params: { id: 123 }});
I am passing the following payload through my AWS lambda:
{
from: 'Someone <example#email.here>',
cc: 'Chris <example#email.here>',
to: 'example#email.here',
template: 'payment-request',
'v:name': 'Client name',
'v:lawyerName': 'Chris',
'v:hoursBooked': '{"name":"1 hours","price":"£200","url":"https://www.example.com/booking","value":1,"selected":true,"type":"hour"}',
'v:workTypes': '[ { name: "something 1" }, { name: "something 2" } ]'
}
In the actual template I am using handlebars as follows:
{{name}} // Renders "Client name"
{{#each workTypes}}
{{this.name}} // Doesn't render anything
{{/each}}
or even accessing an object like:
{{hoursBooked.name}} // Doesn't render anything
{{hoursBooked.price}} // Doesn't render anything
In other words, strings seems to be fine but handlebars 3.0 specifically in mailgun templates doesnt' seem to render object's property values or arrays.
Any help would be greatly appreciated.
The key is:
JSON.stringify
Because few months ago i implemented this code (picture below, coming from mailgun.com inside template option menu) and doesn't worked and instead used like you did, and worked for a while and then it just stopped worked.
'v:workTypes': '[ { name: "something 1" }, { name: "something 2" } ]'
Now my code work just fine
var data = {
//Specify email data
from: from_who,
//The email to contact
to: mail,
//Subject and text data
subject: 'Mailing List',
template: "main_template",
'h:X-Mailgun-Variables': ''
}
var workTypes = [ { name: "something 1" }, { name: "something 2" } ];
data['h:X-Mailgun-Variables'] = JSON.stringify({
name: 'Client Name',
workTypes
});
Just solved my own problem:
apparently we need to use an undocumented hidden and not deductible parameter:
h:X-Mailgun-Variables in the payload we send
We also need to put on our wizardry hat 🧙🏻♂️ to debug their own api: if you follow their example in the official website you will never get anywhere in node.js as it will error out (source.on). Make sure you stringify instead as follows:
'h:X-Mailgun-Variables': JSON.stringify({
name: 'Client name',
lawyerName: lawyerName,
hoursBooked: hoursBooked,
workTypes: workTypes
})
bonus: if your account is from eu, well best of luck the normal implementation won't work! But I got you covered...when passing the parameters to the mailgun.client({}) constructor, add in the following:
mailgun.client({
username: 'api',
key: process.env.yourkey,
url: 'https://api.eu.mailgun.net' // This
)}
I may fundamentally be misunderstanding how to use the hasMany relationships in Ember/ember-model.
the ember-model readme has the following example
postJson = {
id: 99,
title: 'Post Title',
body: 'Post Body',
comments: [
{
id: 1,
body: 'comment body one',
},
{
id: 2,
body: 'comment body two'
}
]
};
App.Post = Ember.Model.extend({
id: Ember.attr(),
title: Ember.attr(),
body: Ember.attr(),
comments: Ember.hasMany('App.Comment', {key: 'comments', embedded: true})
});
App.Comment = Ember.Model.extend({
id: Ember.attr(),
body: Ember.attr()
});
presumably, one would do the following
post = App.Post.create();
post.load(1, postJson);
given the above, now we have access to various post props via get (i.e. post.get('title')), but how to I access the comments?
post.get('comments') returns an object, but it is not a collection of App.Comment objects, which is what I'd expect.
Thanks in advance for any and all help.
It returns a collection object which is iterable, but not an array. I'm working up an example with your code, I'll post it up momentarily (I'm pretty sure load is a private method and you should be using load on the model definition, then find).
App.Post.load(postJson); //sideloading
return App.Post.find(99);
http://jsbin.com/hocopoga/1/edit
I have a JSON object like this in my application:
var pages = {
home: {
title: "Home",
description: "The home page",
file: "home.html",
url: "/home"
},
blog: {
title: "Blog",
description: "Our blog",
file: "blog.html",
url: "/blog"
}
};
The properties file and url can always be derived from the respective key, so I currently define the above object like this in my code:
var pages = {
home: {
title: "Home",
description: "The home page"
},
blog: {
title: "Blog",
description: "Our blog"
}
};
$.each(pages, function(key, value) {
value.file = key + ".html";
value.url = "/" + key;
}
However, since file and url are derived attributes, adding them to the object seems redundant. But since I pass the value around for each page, not the key, I would have to add it to the object as well, which would also be redundant. Like this:
var pages = {
home: {
title: "Home",
description: "The home page"
},
blog: {
title: "Blog",
description: "Our blog"
}
};
$.each(pages, function(key, value) {
value.jsonKey = key;
}
Now I have three different approaches and don't really like any of those. I think this should be a fairly common problem, so how would you approach this? And what if the derived attribute is to be used more than once?
you should consider storing pages as a list of objects rather than as an object with properties. This seems more consistent logically and solves your redundancy concerns.
var pages = [
{
key: 'home'
title: "Home",
description: "The home page",
},
{
key: 'blog',
title: "Blog",
description: "Our blog",
}
];
additionally. you can create classes for page objects and use methods that compute the derived properties (optionally caching them, in case you think repeated access is costly. However, doing that for simple string concatenation seems like an overkill)
Why do you want to store the same data in a different form, when you already have it in one form(your key).
In my opinion, don't go for any of these, because whenever you wish to get the file and url for a particular page, you can easily get it from the page.key.