I need import component with data into vue.js app.
I can component registration and I used this code.
Correct Code:
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components: {
'test': {
template: '<div>msg: {{message}}</div>',
props: {
message: {
type: String,
required: true
}
}
}
}
}
But how can I Local Registration with data?
NOT correct:
import Test from './components/Test.vue';
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components: {
'test': {
template: Test,
props: {
message: {
type: String,
required: true
}
}
}
}
}
This should work
import Test from './components/Test.vue';
export default {
name: 'hello',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components: {
Test
}
}
And if you want to pass props
<template>
<Test :message=msg></Test>
</template>
I use props in component code (components/xxx.vue) and resolved it.
Related
I have a laravel collection that should pass json data to a vue component
$problems = $maintenance->getMaintenanceTypes();
return new MaintenanceTypesCollection($problems);
I'm then creating a radio button using that json collection
<div v-for="m_type in maintenance_types" :key="m_type.id">
<input type="radio" v-model="form.m_type" :value="m_type.id" :id="m_type.id">
<label :for="m_type.id">{{ m_type.problem }}</label>
</div>
and the data is being passed well when I'm using Laravel web routing but when I switch to Vue router the data is not being passed at all.
For reference here is my routes/api.php
Route::get('/maintenance/types', 'Maintenance\MaintenanceTypesController#index');
Here is my Vuex store
import axios from 'axios'
import { data } from 'jquery'
export default {
namespaced: true,
state:{
maintenance_types: []
},
getters:{
maintenance_types (state) {
return state.maintenance_types
}
},
mutations:{
PUSH_M_TYPE (state, data) {
state.maintenance_types.push(...data)
}
},
actions:{
async getMaintenanceTypes ({ commit }) {
let response = await axios.get('/maintenance/types')
commit('PUSH_M_TYPE', response.data.data)
}
}
}
And here is my Vue component script logic
import { mapGetters, mapActions } from 'vuex'
import axios from 'axios'
export default {
data () {
return {
form: {
description: '',
m_type: ''
}
}
},
computed: {
...mapGetters({
maintenance_types: 'maintenance/maintenance_types'
})
},
methods: {
...mapActions({
getMaintenanceTypes: 'maintenance/getMaintenanceTypes'
}),
async submit () {
await axios.post('/api/maintenance/store', this.form)
}
},
mounted () {
this.getMaintenanceTypes()
}
}
When I'm using this Vue routing it is not working
import AppMaintenanceForm from './components/maintenance/AppMaintenanceForm.vue'
export const routes = [
{
path: '/maintenance/form',
component: AppMaintenanceForm,
name: 'MaintenanceForm'
},
]
but when I switch to Laravel's routes/web.php it is working. What could be the problem? Thanks.
I have tried countless to pass data between views using props and can't seem to get it to work. The idea is to pass data from one route to the other and at the end display all user inputted data.
Component A
<script>
export default {
name: 'DependencyStatus',
data: function () {
return {
efcForm: {
born: false
}
}
},
methods: {
processForm: function () {
this.$router.push({name: 'student', props: {messaged: 1}})
console.log({born: this.efcForm.born,})
}
}
}
</script>
Component B
<script>
export default {
name: 'StudentData',
props: ['messaged'],
data: function () {
return {
born: this.$route.messaged
}
},
methods: {
checkForm: function() {
console.log({checkForm: this.born })
}
}
}
</script>
My routes:
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/student',
name: 'student',
component: Student,
props: true
},
You can use dynamic param to pass data from one route
component to another.
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/student/:messaged', // <-- [1] Add dynamic param
name: 'student',
component: Student,
props: true
}
]
Component A:
methods: {
processForm: function () {
this.$router.push({name: 'student', params: { messaged: 1 } }) // <-- [2] pass `messaged` as param instead of prop
}
}
Component B:
methods: {
checkForm: function() {
console.log({ messaged: this.$route.params.messaged }) // <-- [3] excess in the other component via route param
}
}
PS: In case of passing complex ds, consider using Vuex
i want use axios.get and get some data in my database but it have a error.
this is my store.js code
export default new Vuex.Store({
state: {
test: null
},
mutations: {
testt(state, payload) {
state.test = payload;
}
},
actions: {
testFun({ commit }) {
axios.get("http://localhost:8070/beer").then(response => {
let test = {
id: response.data.data.id,
title: response.data.data.title,
subtitle: response.data.data.subtitle
};
commit("testt", test);
});
}
}
});
this is my app.vue code
<script>
import { mapState, mapActions } from "vuex";
export default {
props: {
source: String
},
data: () => ({
drawer: null
}),
computed: {
...mapState(["isLogin"])
},
methods: {
...mapActions(["testFun"])
}
};
</script>
<v-list-item router :to="{name: 'test'}" exact #click="testFun()">
<v-list-item-action>
<v-icon>mdi-contact-mail</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>test</v-list-item-title>
</v-list-item-content>
</v-list-item>
this.is my testt.vue code
<script>
import { mapState } from "vuex";
export default {
computed: {
...mapState(["test"])
},
data() {
return {
beer: []
};
},
mounted() {
//
}
};
</script>
<template>
<div>
<h1>Beer List</h1>
<div v-for="beer in test" :key="beer.id">{{ beer.title }}</div>
</div>
</template>
and i have router
and my database is no problem because i texting path in my controller path it was working but it doesn't woring on vue
but result is error
this is errormessage
TypeError: Cannot read property 'title' of null
Brother in your back-end request the title variable are not exist in your json response kindly check and let me know. if you still facing any issue.
Thanks
I would like to test if my getter is called in my component or view, but I don't understand how can it.
My method in the component :
computed: {
...mapGetters({ item: 'moduleA/getData' }),
},
And this is my unit test declaration :
beforeEach(() => {
store = new Vuex.Store({
modules: {
moduleA: {
state: {},
getters: {
getData() {
return { item: { name: 'test' } };
},
},
},
},
});
wrapper = shallowMount(MyComponent, {
store,
});
});
And I try to test if the data is loaded in my template:
it('should check if name is thruthy', () => {
expect(wrapper.find('.classA').text()).toEqual('test');
});
my component :
<template>
<v-content>
<ComponentA v-if="item.name"
key="keyA" ></ComponentA>
<ComponentB v-else key="keyA"></ComponentB>
</v-content>
</template>
<script>
import { mapGetters } from 'vuex';
import ComponentA from '#/components/ComponentA.vue';
import ComponentB from '#/components/ComponentB.vue';
export default {
/**
* Component's name :
*/
name: 'ViewA',
/**
* Component's used :
*/
components: {
ComponentA,
ComponentB,
},
/**
* computed's used :
*/
computed: {
...mapGetters({ item: 'moduleA/getData' }),
},
};
</script>
and my getter in the moduleA :
const getters = {
getData: state => state.data,
};
But I have this message:
TypeError: Cannot read property 'name' of undefined
Why? Thank you for your help.
As shown in docs, shallowMount's options has field named localVue. To solve your problem you should create a localVue, using createLocalVue and pass it to shallowMount.
createLocalVue returns a Vue class for you to add components, mixins
and install plugins without polluting the global Vue class.
import Vuex from 'vuex'
import { createLocalVue, shallowMount } from '#vue/test-utils'
beforeEach(() => {
const localVue = createLocalVue()
localVue.use(Vuex)
store = new Vuex.Store({
modules: {
moduleA: {
state: {},
getters: {
getData() {
return { item: { name: 'test' } }
},
},
},
},
})
wrapper = shallowMount(MyComponent, {
localVue,
store,
})
})
I want to pass a value from my vue instance to my vue component.
I have following vue component (vuejs dropzonejs component), which das basically a nice Image upload ui.
<template>
<vue-dropzone ref="myVueDropzone" id="dropzone" :options="dropzoneOptions"></vue-dropzone>
</template>
<script>
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.css'
export default {
name: 'app',
components: {
vueDropzone: vue2Dropzone
},
data: function() {
return {
game: {
title: ''
},
dropzoneOptions: {
url: '/games/upload',
method: 'post',
params: {
title: this.game.title
}
}
}
},
methods: {
processFiles () {
this.$refs.myVueDropzone.processQueue();
},
getGameTitle () {
this.game.title = '',
}
}
}
</script>
I Need to get the game title from my vue instance and pass it to my vue component so that I can do some work there with that title.
My vue instance Looks like this:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('vue-dropzone', require('./components/ImageDropzoneComponent.vue'));
const app = new Vue({
el: '#app',
data: {
loading: false,
title: '',
},
methods: {
createGame (e) {
this.uploadImage();
axios.post('/games', {
title: this.title,
})
.then((response) => {
console.log(response.data);
})
.catch((error) => {
console.log(error);
})
},
uploadImage () {
this.$refs.myVueDropzone.processFiles()
},
getGameTitle () {
return this.title;
}
}
});
The tag:
<vue-dropzone ref="myVueDropzone"></vue-dropzone>