In laravel 9 with Inertiajs 3/vuejs 3 I pass parameter to vuejs side in control
public function index()
{
$rate_decimal_numbers = Settings::getValue('rate_decimal_numbers', CheckValueType::cvtInteger, 2);
\Log::info( varDump($rate_decimal_numbers, ' -1 $rate_decimal_numbers::') ); // I see valid value in log file
return Inertia::render('Home/Home',
['rate_decimal_numbers'=> $rate_decimal_numbers]
);
}
But I do not have this parameter in vue page :
<script>
import FrontendLayout from '#/Layouts/FrontendLayout'
import axios from 'axios'
import {$vfm, VueFinalModal, ModalsContainer} from 'vue-final-modal'
...
import {
getHeaderIcon,
...
} from '#/commonFuncs'
import {ref, computed, onMounted} from 'vue'
export default {
name: 'HomePage',
components: {
FrontendLayout,
...
},
setup(props) {
console.log('HOME props::')
console.log(props)
console.log('HOME props.rate_decimal_numbers::')
console.log(props.rate_decimal_numbers) // I see undefined here and next error.
Checking vue tab in my broswer I see :
https://prnt.sc/ZtLN6j2MWua0
and for my component:
https://prnt.sc/AcrSa3_7Yllw
but I see valid value in attrs :
https://prnt.sc/-VFRtomUHGt5
Why so and how that can be fixed ?
Related
Im trying to create routing using vue-router , but I'm getting this error in vscode console:
HarmonyLinkingError: export 'onUnmounted' (imported as 'onUnmounted')
was not found in 'vue' (possible exports: default)" -t "Laravel Mix"
This is my app.js file:
import Vue from "vue";
import router from "./Router";
require("./bootstrap");
Vue.use(router);
Vue.component("home-component", require("./components/HomeComponent.vue"));
Vue.component("admin-component", require("./components/AdminComponent.vue"));
const home = new Vue({
el: "#home"
});
const admin = new Vue({
el: "#admin"
});
Whenever I open it in the browser the page is blank, and the browser console gives me this error:
Uncaught TypeError: (0 ,
vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function
at Module../node_modules/vue-router/dist/vue-router.esm-bundler.js
And this is my router file, located in Router/indexjs :
import { createWebHistory, createRouter } from "vue-router";
import Dashboard from "../components/Admin/DashboardComponent.vue";
import Professeur from "../components/Admin/ProfesseurCompenet..vue";
const routes = [
{
path: "/admin",
name: "Dashboard",
component: Dashboard
},
{
path: "/admin/prof",
name: "Professeur",
component: Professeur
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
Just change few things on the router file as below
instead of importing: import { createWebHistory, createRouter } from "vue-router";
// just do this:
import Vue from 'vue'; //import again even though you already imported it
import Router from 'vue-router'; // and this is where difference comes in
import Dashboard from "../components/Admin/DashboardComponent.vue";
import Professeur from "../components/Admin/ProfesseurCompenet..vue";
Vue.use(Router);
const routes = [
{
path: "/admin",
name: "Dashboard",
component: Dashboard
},
{
path: "/admin/prof",
name: "Professeur",
component: Professeur
}
];
//then you're router to export as follows
const router = new Router({routes : routes});
export default router
When I run the project, it displays ReferenceError: getters is not defined as per following image:
app.js file:
store.js file:
What is problem causing this error?
Thanks.
You should use store.getters.variable_name to retrieve state value.
Sample code for retrieving accessToken:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
accessToken: null
},
getters: {
accessToken: state => state.accessToken
},
actions: {
doSomethingsHere({ commit }, somethingData) {
console.log('accessToken: ' + store.getters.accessToken)
}
}
})
export default store
I am trying to make a vue SPA using vuex, vue-router & laravel for backend. I was separating our data on our app.js to try to reduce clutter and keep our code neat. When everything on one page it works as intended, loading the routes in the router. But when we separate the code to make it more modular into: app.js, boostrap.js, routes.js, and store.js
The components aren't loading in our router-view and we are able to see our RouterLink
app.js
// Require the bootstrapper
require('./bootstrap');
// Grab imports
import Store from './store';
import Router from './routes';
// Views
import App from './views/App';
// Create the application
const app = new Vue({
el: '#heroic',
components: { App },
store: Store,
router: Router
});
boostrap.js
// Imports
import Vue from 'vue';
import Axios from 'axios';
import Swal from 'sweetalert2';
// Add to window
window.Vue = Vue;
window.Axios = Axios;
// Add Axios headers
window.Axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
window.Axios.defaults.headers.common['Authorization'] = 'Bearer ' + 'token';
window.Axios.defaults.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
routes.js
// Imports
import Vue from 'vue';
import VueRouter from 'vue-router';
import Store from './store';
// Set to use
Vue.use(VueRouter);
// Views
import Hello from './views/Hello';
import Home from './views/Home/';
import UserIndex from './views/UserIndex';
// Create our routes
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
{
path: '/users',
name: 'users.index',
component: UserIndex,
}
];
// Create the router
const router = new VueRouter({
mode: 'history',
routes: routes,
scrollBehavior (to, from, saved) {
if (saved) {
return saved;
}
return { x: 0, y: 0};
}
});
// Before every request
router.beforeEach((to, from, next) => {
});
// After every request
router.afterEach((to, from, next) => {
});
// Export
export default router;
hello.vue
<template>
<div class="row row-cards row-deck">
<div class="col-lg-4 col-md-6">
<p>Hello World!</p>
</div>
</div>
</template>
store.js
// Imports
import Vue from 'vue';
import Vuex from 'vuex';
import PersistedState from 'vuex-persistedstate';
import Cookie from 'js-cookie';
// Set use
Vue.use(Vuex);
// Create our store
const store = new Vuex.Store({
state: {
auth: [{
id: 1,
username: '',
motto: '',
rank: 1,
permissions: [],
token: ''
}],
users: [],
},
mutations:{
},
actions: {
},
getters: {
}
});
// Export
export default store;
The expected result is that when I visit the "/hello" route it would show the information that says "Hello world!" that is within the Vue file specified as the component in the routes section of the router. Instead using my Vue DevTools I get the following with no Hello world on the page.
https://i.pathetic.site/chrome_99Mbxf7f0c.png
My guess is the router is stuck waiting for the beforeEach (and also possibly afterEach) hook to be resolved. You need to call next().
Also unrelated, but if you’re using modules then you shouldn’t need to assign stuff on window.
I'm trying to align my tests to follow breaking changes after upgrading react-redux to 6.0.0 and redux-form to 8.1.0 (connected components do not take store in props any longer)
I needed to wrap my connected component in from react-redux in tests and use mount to get to actual component but now ReduxForm is rendered twice.
I tried to use hostNodes() method but it returns 0 elements.
Any ideas how to fix it?
Here is the test:
import React from 'react'
import { mount } from 'enzyme'
import configureStore from 'redux-mock-store'
import { Provider } from 'react-redux'
import PasswordResetContainer from './PasswordResetContainer'
describe('PasswordResetContainer', () => {
it('should render only one ReduxForm', () => {
const mockStore = configureStore()
const initialState = {}
const store = mockStore(initialState)
const wrapper = mount(<Provider store={store}><PasswordResetContainer /></Provider>)
const form = wrapper.find('ReduxForm')
console.log(form.debug())
expect(form.length).toEqual(1)
})
And PasswordResetContainer looks like this:
import { connect } from 'react-redux'
import { reduxForm } from 'redux-form'
import PasswordReset from './PasswordReset'
import { resetPassword } from '../Actions'
export const validate = (values) => {
const errors = {}
if (!values.email) {
errors.email = 'E-mail cannot be empty.'
} else if (!/^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
errors.email = 'Invalid e-mail.'
}
return errors
}
export default connect(null, { resetPassword })(
reduxForm(
{ form: 'passwordReset',
validate
})(PasswordReset))
Output from test is following:
PasswordResetContainer › should render only one ReduxForm
expect(received).toEqual(expected)
Expected value to equal:
1
Received:
2
Edit (partial solution found):
When I changed wrapper.find('ReduxForm')
into wrapper.find('ReduxForm>Hoc>ReduxForm') it started to work.
Why do I need to do such a magic?
A fix is on library mods to create but if the forms are identical, one quick way to get around the issue is to call first() after find so that
wrapper.find('ReduxForm')
looks like:
wrapper.find('ReduxForm').first()
In my .vue file within my template section I have:
<a v-bind:href="'javascript:artist(\'' + _.escape(artist) + '\')'">
which is using the Lodash function _.escape. This generates a string of errors the first of which is:
[Vue warn]: Property or method "_" is not defined on the instance but referenced during
render.
However in the same file in the script section of the component I am happily and successfully using a range of Lodash functions.
This is a Laravel app and in my app.js file I have this code:
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router';
window.Vue.use(VueRouter);
import lodash from 'lodash';
Object.defineProperty(Vue.prototype, '$lodash', { value: lodash });
import SearchHome from './components/search.vue';
const routes = [
{
path: '/',
components: {
searchHome: SearchHome
}
},
]
const router = new VueRouter({ routes })
const app = new Vue({ router }).$mount('#app')
Can anyone please help me?
Try to use a computed value instead. This will improve readability.
Avoid complex operation in a binding.
<a :href="artistLink">
And in the script
import _ from 'lodash'
export default {
computed: {
artistLink () {
return 'javascript:artist(\'' + _.escape(this.artist) + '\')'
}
}
}