I'm passing posts from controller to a Vue component:
public function show(Post $post)
{
return Inertia::render('Post/Show', ['post' => $post]);
}
In my vue file I have this:
<script>
import { ref, computed } from 'vue'
export default {
props: {
post: Object
}
}
const article = ref(post)
But this throws an error: Uncaught (in promise) ReferenceError: post is not defined.
How do I pass my post obj and assign it to the article constant?
I tried props.post but that isn't the solution, I'm very new to Vue and I'm mostly focused on backend stuff.
Related
I am working with Laravel and Inertia+Vue.js.
I am trying to delete a row but I get a 405 error method not allowed.
Here is my code in Layout.vue :
<a #click="destroy(website)">delete</a>
import AppLayout from '#/Layouts/AppLayout.vue';
import {Link} from "#inertiajs/inertia-vue3";
import {Inertia} from "#inertiajs/inertia";
export default {
components: {
Link, AppLayout, Inertia
},
props: {
websites: Object
},
methods: {
destroy(website) {
if(confirm('are u sure?')) {
this.$inertia.delete(`/destroy/website/${website.id}`)
}
}
},
the method in my controller :
public function destroy(Website $website)
{
$website->delete();
return redirect()->route('dashboard');
}
my route in web.php :
Route::delete('/destroy/website/{id}', [WebsiteController::class, 'destroy']);
the request from the browser as it appears in the network panel is DELETE https://website.fr/destroy/website/2 (2 is the id of the website I clicked on)
any help will appreciated !
For this to work:
destroy(Website $website)
your route should be:
Route::delete('/destroy/website/{website}', [WebsiteController::class, 'destroy']);
not /destroy/website/{id} so Laravel can inject the model with the id passed from your front end
My suggested code for the routes section:
Route::delete('destroy-website/{website}', [WebsiteController::class, 'destroy']);
I am trying to parse a dynamic HTML with interpoltion inside them inside a Vue component in Inertia. My code looks something like below:
<template>
<div v-if="parsed" v-html="parsed"></div>
</template>
...
export default {
data(): return {
html: null,
name: null,
parsed: null,
},
mounted() {
this.name = "John"; // I got this from the API
this.html = "<h1>Hi, {{this.name}}!</h1>";
this.parse();
},
methods: {
parse() {
this.parsed = Vue.compile(html);
}
}
}
The error I'm getting is:
[Vue warn]: Error in v-on handler: "ReferenceError: Vue is not
defined"
My question is, how do I access the underlying Vue object inside the component. Thanks!
Check the cdn or js file version you have given.
I'm trying to get all user permissions with Laravel for backend and vuejs for frontend.
How can i get this from api to vue? what is the best choice?
I tried to get them with below code but shows me error
In the permissionMixin:
import PermissionDataService from '../../Servieces/PermissionDataService'
export default {
methods: {
checkPermission() {
let permissions;
PermissionDataService.get("user_permissions")
.then((response) => {
permissions= response.data;
})
.catch((error) => {
console.debug(error)
});
return hasAccess;
}
}
}
and that is how i used it in main.js:
import permission from "#/core/mixins/permissionMixin";
Vue.mixin(permission);
window.Laravel = this.checkPermission();
console.debug(Laravel)
Vue.directive('can', function (el, binding) {
return Laravel.permissions.indexOf(binding) !== -1;
});
but always shows me this error:
Uncaught TypeError: can't access property "defaults", a.default.axios is undefined
I am totally sure the endpoint is ok
ANY Idea?
Finally solved.
I had to put
window.Laravel = this.checkPermission();
into one of layout files
I want create global method to translate message using Laravel-JS-Localization
But when i call the method using vue mustache got an error like this:
Property or method "trans" is not defined on the instance but referenced during render.
Make sure that this property is reactive.
Here my laravel app.js code:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('dashboard', require('./components/Dashboard').default);
const app = new Vue({
el: '#vue',
methods: {
trans: function (key) {
return Lang.get(key);
},
},
});
Dashboard.vue code :
<template>
<p>{{ trans('common.welcome') }}</p>
</template>
<script>
data () {
return {
name: '',
}
},
</script>
dashboard.blade.php code :
..........
<div class="col-9" id="vue">
<dashboard></dashboard>
</div> <!--c end col-8 -->
..........
I would probably go with creating a Plugin. For example
Vue.use({
install (Vue) {
Vue.prototype.$trans = Lang.get
}
})
Adding this to your app.js code before creating any components or new Vue({...}) will mean all your components will have access to the $trans method.
Alternatively, you can create a Global Mixin but these aren't strongly recommended.
Use global mixins sparsely and carefully, because it affects every single Vue instance created, including third party components
Vue.mixin({
methods: {
trans (key) {
return Lang.get(key)
}
}
})
I have app.js importing axios and VueAxios as:
Vue.use(VueAxios, axios);
Then calling my component:
Vue.component('api-call', require('./components/PostComponent'));
In my PostComponent I have a simple axios get as follows:
<script>
export default {
// name: "PostComponent"
data() {
return {
post: {},
}
},
methods: {
getPosts: () => {
console.log('started');
//let that = this;
let uri = 'https://jsonplaceholder.typicode.com/posts';
this.axios.get(uri).then((response) => {
console.log(response);
})
}
},
mounted(){
this.getPosts()
}
}
</script>
Since I want this executed right at the start of the component loading I am using mounted (why Vue don't have a constructor baffles me, even react passed on the isMounted pattern.)
What am I doing wrong?
thanks,
Bud
You can't use arrow function for methods declaration.
See https://v2.vuejs.org/v2/api/#methods
Note that you should not use an arrow function to define a method
(e.g. plus: () => this.a++). The reason is arrow functions bind the
parent context, so this will not be the Vue instance as you expect and
this.a will be undefined.
These are the 2 ways to properly define a method
1.
getPosts: function() {
}
(if you can use ES6)
getPosts() {
}