I've code in file navigation-menu.blade.php
#if (auth()->user()->role_id == 2)
<x-jet-nav-link href="{{ route('murid.index') }}" :active="request()->routeIs('murid.index')">
{{ __('Murid') }}
</x-jet-nav-link>
#endif
and my code in routes/web.php
Route::group(['middleware' => 'auth'], function() {
Route::group(['middleware' => 'role:murid', 'prefix' => 'murid', 'as' => 'murid.'], function() {
Route::resource('murid', \App\Http\Controllers\MuridController::class);
});
});
But, i got error Route [murid.index] not defined.
From file navigation-menu.blade {{ route('murid.index') }} can't define. i already define in routes/web.php.
What's wrong with my code ?
Anyone can help me ?
Thanks
If you have prefix "murid" and resource is "murid", then you must call the route like
href="{{ route('murid.murid.index') }}"
That must fix the issue.
Related
I have to use i18n variables for a select dropdown in the form.
I can access i18n data in main.js like this :
// Load locales
axios
.get("http://localhost:3000/data")
.then(({data}) => {
console.log(data);
appOptions.i18n.setLocaleMessage("fr", basil.get(data, "fr", {}));
appOptions.i18n.setLocaleMessage("en", basil.get(data, "en", {}));
appOptions.i18n.setLocaleMessage("nl", basil.get(data, "nl", {}));
})
.catch((error) => {
console.error(error);
});
In my form component I can use these date for example for simple field like this :
<div class="success" v-if="success">
{{ $t("contact.success_message") }}
</div>
I would like to use v-for for select options with "$t" variable . Something like this don't work :
<option
v-for="item in $t("register")"
:key="item"
:value="item"
>
{{ item }}
Can you please tell me how can I achieve this if I have to follow the structure of the json file with i18n variable :
{
es: {
contact: {
contact_demo: "Contáctenos para una demostración",
contact_sales: "Comuníquese con ventas",
...
},
register: {
option_Germany: "Alemania",
option_Morocco: "Marruecos",
option_Belgium: "Bélgica",
option_Cook Islands: "Islas Cook",
...
found the solution :
<select id="countries">
<option
v-for="value in $t('register',)"
:key="value"
>
{{ value }}
</option>
</select>
In my laravel 7 /livewire 1.3 / turbolinks:5 / alpine#v2 app I have route defined
Route::livewire('/hostel/{slug}', 'hostel.hostel-view-page')->name('hostel-view-page');
When I use it :
<a href="{{ route('hostel-view-page', $hostelsIsHomepageSpotlight->slug) }}" >
Title
</a>
it does not work as reactive, as all page is reloaded. I prefer to name of this route, not like :
<a href="/hostel/{{ $hostelsIsHomepageSpotlight->slug }}" >
Title
</a>
Which is a valid way ?
Thanks!
Try this, it works well for me:
Route::group(['prefix' => 'admin',
'as' => 'admin.',
'middleware' => 'your:middleware',
], function () {
Route::livewire('your-url-here', 'your-livewire-class-here')
->name('whatever.you.want');
});
I've a multilang Nuxt App using nuxt-i18n with ignored routes.
nuxt.config.js
…
seo: true,
parsePages: false,
strategy: 'prefix_except_default',
pages: {
'cats': {
en: '/cats',
de: '/katzen',
fr: false
}
}
…
So the page is not available in french.
My lang switch looks like this – pretty simple so far:
LanguageSwitch.vue
computed: {
availableLocales () {
return this.$i18n.locales.filter(i => i.code !== this.$i18n.locale)
}
}
<ul class="language-switch__list">
<li class="language-switch__item" v-for="locale in availableLocales">
<NuxtLink
class="language-switch__link"
rel="alternate" :key="locale.code"
:to="switchLocalePath(locale.code)"
:hreflang="locale.code" :lang="locale.code"
active-class="none"
exact>
{{locale.name}}
</NuxtLink>
</li>
</ul>
I've changed the filter to remove missing pages/languages like that:
return this.$i18n.locales.filter(i => (i.code !== this.$i18n.locale) && (this.$nuxt.$route.path !== this.switchLocalePath(i.code)) )
That works, but I'd like a better solution. Here is my question: Is there an easy way to change the routes to the language homepage (/,/en,/de) if the route is ignored?
I have solved the problem by simply wrapping an additional function around it:
<nav id="language-switch" v-if="isOpen" class="language-switch__nav arrow arrow--top">
<ul class="language-switch__list">
<li class="language-switch__item" v-for="locale in availableLocales">
<NuxtLink class="language-switch__link" rel="alternate" :key="locale.code" :to="switchLocalePathFallback(locale.code)" :hreflang="locale.code" :lang="locale.code" active-class="none" exact>{{locale.name}}</NuxtLink>
</li>
</ul>
</nav>
…
computed: {
availableLocales () {
return this.$i18n.locales.filter(i => (i.code !== this.$i18n.locale) )
}
},
methods: {
switchLocalePathFallback(code) {
let langPath = this.switchLocalePath(code),
path = langPath
if(langPath == this.$nuxt.$route.path ) {
path = this.$i18n.defaultLocale != code ? '/'+code : '/'
}
return path
}
}
…
Not very flexible but it works for me.
https://reactjs.org/docs/faq-functions.html#example-passing-params-using-data-attributes .
Essentially, it is an optimization of arrow function
<li key={letter} onClick={() => this.handleClick(letter)}>
{letter}
</li>
to the following to avoid rerendering
<li key={letter} data-letter={letter} onClick={this.handleClick}>
{letter}
</li>
handleClick(e) {
this.setState({
justClicked: e.target.dataset.letter
});
}
I find it doesn't work for react-native-web, e.target.dataset is empty.
Is this expected?
i think you just need to change the declaration of your function to something like this:
handleClick = (e) => {
this.setState({
justClicked: e.target.dataset.letter
});
}
Hi I am pretty new to VueJS and have started working on a very simple API request. I have an object that looks like this:
posts: [
text: "String",
choices: {"1":"Yes","2":"No"}
]
Coming from angular, this seems very straightforward. I would just use a filter to convert choices to an object and loop over it. However, I ran into a problem. When I attempt to use the filter 'log' or 'json' in the v-for, they don't work.
<template>
<div>
<li v-for="(post,index) in posts | log">
<ul>
{{ post.text | log }}
{{ post.choices | json }}
<li v-for="(value,key) in post.choices | json">
{{value}} {{key}}
</li>
</ul>
</li>
</div>
</template>
<script>
import {HTTP} from './main';
export default {
filters: {
json: function (value) {
return JSON.parse(value)
},
log: function (value) {
console.log(value)
}
},
props: [
'apiKey'
],
data: () => ({
posts: [],
post: [],
errors: []
}),
created() {
HTTP.get('questions', { headers: { 'Api-Key': this.apiKey} })
.then(response => {
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
Then no data shows up, however they work fine in the mustache template. Any thoughts on how I can accomplish this?
tl;dr
works:
{{ post.choices | json }}
does not work:
<li v-for="(value,key) in post.choices | json">
Any work around? I can't use computed properties because this is a "sub-object" of an array and computed properties don't work that way, unless I am mistaken?
You cannot add a filter to a v-for directive.
Just parse the data before setting the posts data property:
HTTP.get('questions', { headers: { 'Api-Key': this.apiKey} })
.then(response => {
let posts = response.data;
post.forEach(p => p.choices = JSON.parse(p.choices));
this.posts = posts;
})
I don't see why you need to use JSON.parse, since the choices key refers to a valid JS object. Unless you have made a mistake, and that the choices key refers to a string.
Anyway, if you want to parse post.choice into a valid JS object, you can simply pass it into a custom function which returns the parsed JSON to v-for, for example:
<li v-for="(value,key) in postChoicesJson(post.choice)">
{{value}} {{key}}
</li>
And then declare a method for that:
postChoicesJson: function(obj) {
return JSON.parse(obj);
}
Note: Your DOM is invalid, because <li> elements must be a direct child of a <ul> or an <ol> element.