My current url is localhost:8000/admin/category/create
app.js
{
path : '/admin',
component : dashboard
},
{
name : 'list_category',
path : '/admin/category',
component : list_category
},
{
name : 'show_category',
path : '/admin/category/show/:id',
component : show_category
},
{
name : 'create_category',
path : '/admin/category/create',
component : create_category
},
{
name : 'edit_category',
path : '/admin/category/edit/:id',
component : edit_category
}
Upon navigating to list category from create category
ie,
<router-link class="btn btn-sm pull-right" to="admin/category"><strong>Category list</strong></router-link >
url becomes localhost:8000/admin/category/admin/category.
but what i need is this localhost:8000/admin/category route.
Thank you
Named vue route solved my issue
I changed
<router-link to="admin/catgeory" ><span>Artwork Category</span></router-link></li>
to
<router-link :to="{ name: 'list_category' }" ><span>Artwork Category</span></router-link></li>
Related
In vue3 component I have this code:
<script>
export default {
data() {
return {
vendedores: [{
id: 1,
nombre: "Name test1"
}],
};
}
};
</script>
Having this template, there everything works fine:
<div v-for="vendedor in vendedores"
:key="vendedor.id">
</div>
But in this one is displaying an error everytime vite compiles the assets:
<div v-for="vendedor in vendedores"
:key="vendedor.id">
<button
:class="(vendedor.seleccionado)? 'bg-zinc-800 border-amber-300' : 'bg-transparent'"
class="border-zinc-400 rounded-full py-3 text-left hover:border-violet-200"
>
<span> Test</span>
</button>
</div>
The error displayed in the console is the following:
TypeError: can't access property "nodeValue", node is null
setText runtime-dom.esm-bundler.js:30
processText runtime-core.esm-bundler.js:5109
patch runtime-core.esm-bundler.js:5064
patchKeyedChildren runtime-core.esm-bundler.js:5849
patchChildren runtime-core.esm-bundler.js:5792
patchElement runtime-core.esm-bundler.js:5305
processElement runtime-core.esm-bundler.js:5165
patch runtime-core.esm-bundler.js:5082
...
I have updated #vite to last version (^3.2.0) and vue3 (3.2.41). Other components working fine in other projects with the same version.
I have a custom Gutenberg block (https://pastebin.com/bV2k5Ekc) in which I display text, link and an image. I want to change it so so instead of saving the image URL as a background image of the container, to use an img tag. Unfortunately - I can't manage to create the deprecation correctly - I fail at assigning the attributes parameters in the deprecation:
From this:
const {
attributes: {
mediaURL,
boxTitle,
boxDescription,
linkText,
linkHref,
linkTitle
},
className,
} = props;
let boxClass = 'cta-box';
let contentDescription = '';
if (boxDescription.length) {
boxClass += ' cta-box-description';
contentDescription = (
<p>
{boxDescription}
</p>
)
}
return (
<div className={`cta-block-box ${className}`}>
<a
className="cta-box-link"
href={linkHref}
style={{ backgroundImage: "url(" + mediaURL + ")" }}
rel="noopener noreferrer"
>
<div className={boxClass}>
<h3>
{boxTitle}
</h3>
{contentDescription}
<span className="arrow">{linkText ? linkText : linkTitle}</span>
</div>
</a>
</div>
);
},
To this (I only change what's in the return statement):
return (
<div className={`cta-block-box ${className}`}>
<a
className="cta-box-link"
rel="noopener noreferrer"
>
<img className="cta-box-image" src={linkHref} alt=""/>
<div className={boxClass}>
<h3>
{boxTitle}
</h3>
{contentDescription}
<span className="arrow">{linkText ? linkText : linkTitle}</span>
</div>
</a>
</div>
);
Which of course broke the Gutenberg element. So I added a deprecate to the blog, as much as I could following the official Wordpress documentation:
deprecated: [
{
attributes: {...this.attributes},
save: (props) => {
const {
attributes: {
mediaURL,
boxTitle,
boxDescription,
linkText,
linkHref,
linkTitle
},
className,
} = props;
console.log('dep');
console.log(props);
let boxClass = 'cta-box';
let contentDescription = '';
if (boxDescription.length) {
boxClass += ' cta-box-description';
contentDescription = (
<p>
{boxDescription}
</p>
)
}
return (
<div className={`cta-block-box ${className}`}>
<a
className="cta-box-link"
style={{ backgroundImage: "url(" + mediaURL + ")" }}
rel="noopener noreferrer"
>
<div className={boxClass}>
<h3>
{boxTitle}
</h3>
{contentDescription}
<span className="arrow">{linkText ? linkText : linkTitle}</span>
</div>
</a>
</div>
);
},
}
],
After this the editor page crashes, and I get error message in console, that attributes is not defined (displaying incorrect row in the script file). This is the "after" script contents (https://pastebin.com/dVdLMx7N).
react-dom.min.js?ver=16.13.1:125 ReferenceError: attributes is not defined
at save (cta-box2.js?f66a:242)
at Wt (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3)
at Qt (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3)
at block-editor.min.js?ver=4378547cec8f5157a02ead3dfc5c65b2:12
at hooks.min.js?ver=50e23bed88bcb9e6e14023e9961698c1:2
at $r (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3)
at blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3
at Ur (blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3)
at blocks.min.js?ver=9ed25ffa009c799f99a4340915b6dc6a:3
at Array.reduce (<anonymous>)
Any help would be greatly appreciated! I suspect I'm missing some small detail, but so far I've failed to locate it. And was not able to find relevant enough information on the web.
Thanks in advance!
There are two issues in your "after" script:
The attributes do not match (and the this is actually the window object): attributes: {...this.attributes} (see line 212).
So what you used with the attributes property on line 24, should also be used with the same property on line 212. (because you only changed the output, so the block attributes remain the same)
The save output/markup also do not match — in the "before" script, you've got href={linkHref}, but in the deprecated property of the "after" script, the save output did not have that href. (see this diff)
So make sure the attributes and save output match the ones in the old/"before" script, and the following is how your code would look like, but note that I only included the main parts that need to be fixed:
// Define the attributes and use it with the root "attributes" property and
// the one in the "deprecated" property.
const blockAttributes = {
mediaID: {
type: 'number'
},
mediaURL: {
type: 'string'
},
boxTitle: {
type: 'string',
default: ''
},
// ... the rest of the attributes here.
};
registerBlockType('hswp/test-box', {
title: __('Test Box', 'modula'),
// ... your code.
attributes: blockAttributes,
// ... your code.
deprecated: [
{
attributes: blockAttributes,
save: (props) => {
// ... your code.
return (
<div className={`cta-block-box ${className}`}>
<a
className="cta-box-link"
href={linkHref}
style={{ backgroundImage: "url(" + mediaURL + ")" }}
rel="noopener noreferrer"
>
... your code.
</a>
</div>
);
},
}
],
});
Additionally, note that the PlainText component doesn't (as of writing) have a property named tagName.
I want to remove the active class of list item which I had set intentionally active so when the page load I want this list item to remain active using routerLinkActive="active". I want to disable this active class when I select the other items of list in angular
I tried using ngClass but didn't worked as expected. How can this be done without using jquery?
<ul class="nav">
<li routerLinkActive="active" *ngFor="let menuItem of menuItems" [ngClass]="{'active': selectedItem == menuItem}" (click)="listClick($event, menuItem)">
<a class="nav-link" [routerLink]="[menuItem.path]">
<p>{{ menuItem.title }}</p>
</a>
</li>
</ul>
declare interface RouteInfo {
path: String,
title: String,
class: String
}
export const ROUTES: RouteInfo[] = [
{ path: '', title: 'Dashboard', class: '' },
{ path: '/vessel', title: 'Vessel Details', class: '' },
{ path: '/arrival', title: 'Arrival Details', class: ''},
{ path: '/stock', title: 'StockYard', class: ''},
{ path: '/cargo', title: 'Cargo Details', class: '' },
{ path: '/other', title: 'Others', class: ''}
];
menuItems: any[];
selectedItem= false;
listClick(event, newValue) {
console.log(newValue);
this.selectedItem = !this.selectedItem;
}
The intentionally setted active class should be disabled when other list items are clicked.
I see what your trying to do now. You shouldn't need to use ngClass or the click event. Angular will check to see if the active route matches the routerLink path. If it does, the class specified in ActiveRouterLink is added.
It's hard to solve your issue without knowing what you are seeing but try adding [routerLinkActiveOptions]="{exact: true} to the li element.
I am trying to use the last version of vuejs with Laravel 5.3 ! The idea I am trying to fulfill is make a component foreach user. So that I have all users listed and foreach one there is a button "edit" , when I click this button I should see the form to update this user.
So this is how I defined the component :
<script>
new Vue({
el: '.view-wrap',
components: {
user-view: {
template: '#user-view',
props: ['user']
}
},
data: {
users: <?php echo json_encode($users); ?>,
},
methods: {
showForm: function(number){
$('div.update-user-'+number).css({'display':'block'});
},
getClassName: function (index) {
return "update-user-"+index;
},
getUpdateUrl: function(id){
return '/users/update/'+id;
},
}
});
This is the template for the "user-view" which take a class name "updateClass" which contains the id of every user (for show/hide purposes), an "updateUrl" which is the url to update the user to bind it with each form action and finally the object user :
<template id="user-view">
<div>
<div class="updateclass">
<form class="form-horizontal" method="PUT" action="updateUrl">
{{ csrf_field() }}
<ul>
<li>
<label for="name"> Name </label>
<input type="text" name="name" :value="user.name">
</li>
<li>
{!! Form::submit('Save', ['class' => 'button-green smaller right']) !!}
</li>
</ul>
{!! Form::close() !!}
</div>
and This is finally how I call the template :
<user-view v-for="user in users" :updateclass="getClassName(user.id)" :user="user" :updateUrl="getUpdateUrl(user.id)"></user-view>
The issue then : it seems that for example [class="updateclass"] doesn't change the value of updateclass with the result of getClassName(user.id) as defined in template call that is binded to. When I try it with [:class="updateclass"] in the template I get : Property or method "updateclass" is not defined on the instance ...
and the same thing applies to all other binded attributes.
The syntax you are using to assign a class dynamically is wrong. from the getClassName method you have to return a object having className like this : {"className: true} , like following
getClassName: function (index) {
var tmp = {}
var className = 'update-user-'+index
tmp[className] = true
return tmp
}
Than you can assign it like following as is in documentation:
<div :class="updateclass"></div>
QQ on MongoDB and Meteor templates. I'm trying to set up a helper that will display each photo from a given DB and I'm having trouble pulling the image.
Right now a document from my DB looks like:
{ "order" : 19,
"img" : "http://foo.cdninstagram.com/photo.jpg",
"time" : "99999999999",
"user" : { "username" : "ME!",
"website" : "",
"profile_picture" : "http://foo.instagram.com/foophoto.jpg",
"full_name" : "Monique Rana",
"bio" : "",
"id" : "1234567" },
"_id" : "abc123" }
Below is the code that I'm working with.
<template name="currentTag">
<div class="container">
<ul class="grid effect-8" id="grid">
{{#each Tag}}
<li><img src="{{Tags.img}}"></li>
{{/each}}
</ul>
</div>
</template>
and the helper I'm building:
Template.currentTag.helpers({
Tag: function () {
return Tags.find().fetch();
}
});
Thanks!
You can use {{img}} instead of {{Tags.img}} to fix the issue. The data context in the {{#each Tag}} block is of the item itself.
Also you don't need .fetch since the template understands cursors, which are slightly more efficient i.e return Tags.find();