I'm trying to pass data from my existing app to a single-file component in Vue. However, the component doesn't seem to be receiving the prop from the parent.
Sandbox here
Code:
// index.js
import Vue from "vue";
import App from "./App";
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: "#app",
template: "<App/>",
propsData: {
someProp: "this is a prop test!!"
},
components: { App }
});
And the component:
// App.js
<template>
<div id="app">
<h1>My Todo App! the prop: {{ someProp }}</h1>
<TodoList/>
</div>
</template>
<script>
import TodoList from "./components/TodoList.vue";
export default {
props: ["someProp"],
components: {
TodoList
}
};
</script>
The result doesn't show the prop at all, as if it's not passing anything. What gives?
Related
In one of our project i try to use vuejs-countdown-timer component, but i get this error
Unknown custom element: - did you register the component
correctly? For recursive components, make sure to provide the "name"
option.
in this package documentation we have:
//Installation
npm i vuejs-countdown-timer -S Import component
// global register at main.js import VueCountdownTimer from
'vuejs-countdown-timer';
Vue.use(VueCountdownTimer);
and basic usage of that:
<template>
<vue-countdown-timer
#start_callback="startCallBack('event started')"
#end_callback="endCallBack('event ended')"
:start-time="'2018-10-10 00:00:00'"
:end-time="1481450115"
:interval="1000"
:start-label="'Until start:'"
:end-label="'Until end:'"
label-position="begin"
:end-text="'Event ended!'"
:day-txt="'days'"
:hour-txt="'hours'"
:minutes-txt="'minutes'"
:seconds-txt="'seconds'">
</vue-countdown-timer>
</template>
<script >
export default {
name: 'Timer',
methods: {
startCallBack: function(x) {
console.log(x);
},
endCallBack: function(x) {
console.log(x);
},
},
};
</script>
now after installing the package i imported into my app.js:
import Vue from 'vue'
import VueCountdownTimer from 'vuejs-countdown-timer';
Vue.use(Vuelidate)
Vue.use(VueCountdownTimer)
window.Vue = require('vue').default
import Timer from './components/partials/timer.vue'
new Vue({
store,
components: {
Timer,
//
}, computed: {}, mount: {}
}).$mount('#app')
and after that i try to use into html template as:
<login inline-template>
<div class="page-content">
<div class="content-wrapper">
...
</div>
<Timer></Timer>
</div>
</login>
my login.js content:
import {required, minLength, maxLength} from 'vuelidate/lib/validators'
import axios from "axios";
import {route} from "../../routes";
export default {
data() {
return {
//
}
}
}
Register vue-countdown-timer globally in app.js and your custom component timer locally in login.js
app.js
import Vue from 'vue'
import VueCountdownTimer from 'vuejs-countdown-timer';
Vue.use(Vuelidate)
Vue.use(VueCountdownTimer)
window.Vue = require('vue').default
new Vue({
store,
computed: {}, mount: {}
}).$mount('#app')
Login.js
import {required, minLength, maxLength} from 'vuelidate/lib/validators'
import axios from "axios";
import {route} from "../../routes";
import Timer from '../partials/timer.vue'
export default {
data() {
return {
//
}
},
components: {
Timer
},
}
I have a component like this
<template>
<div class="my-hello">
Hello {{ man }}
<slot name="test"></slot>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'HelloWorld',
props: {
man: String
}
})
</script>
I want to render this component with render function. My attempt is this, but it is not working.
import { createApp, h } from 'vue'
const app = createApp({
render () {
return h(component, { man: 'David' }, { test: () => h('p', {}, 'SLOT DATA') })
}
})
app.mount(element)
In here component is my imported single file vue component (HelloWorld). element is some element on the main html.
What's wrong here?
I am creating a simple Vue.js application with Laravel. I have registered Vue.js with:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import App from './components/App';
const app = new Vue({
el: '#app',
components: {
App
},
router,
});
If I create a custom component, this works just fine:
Vue.component('nav-section', {
template: `<div>This is odd</div>`
});
I can then call <nav-section></nav-section> in any given template, and it will output "This is odd."
However if I use Laravel's require method like so:
Vue.component('nav-section', require('./components/Navigation'));
It is not working anymore. <nav-section></nav-section> is empty, blank.
No errors in npm or console. Am I missing something, or some logic behind require?
Navigation.vue:
<template>
<div>
<span>Sample text</span>
</div>
</template>
<script>
export default {}
</script>
Vue.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import App from './components/App';
Vue.component('nav-section', require('./components/Navigation'));
const app = new Vue({
el: '#app',
components: {
App
},
router,
});
Try writing it out like this, with the extension and default:
Vue.component('nav-section', require('./components/Navigation.vue').default);
I've read a lot of posts here and none of them worked for me. I have a very basic VueJS app but I have an error when I write something in my first component. Here's my code :
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
item: ''
},
mutations: {
change(state, item) {
state.item = item
}
},
actions: {
change({ commit }, newValue) {
commit('change', newValue);
}
},
getters: {
item: item => state.item
}
})
App.vue
<template>
<div id="app">
<AddItem/>
<DisplayItem/>
</div>
</template>
<script>
import AddItem from './components/AddItemComponent'
import DisplayItem from './components/DisplayItemComponent'
export default {
name: 'App',
components: {
AddItem,
DisplayItem
}
}
</script>
AddItemComponent.vue
<template>
<div>
<label for="item">Nom de l'objet</label><br/>
<input type="text" name="item" #input="changed">
</div>
</template>
<script>
export default {
methods: {
changed: function (event) {
this.$store.dispatch('change', event.target.value)
}
}
}
</script>
DisplayItemComponent.vue
<template>
<div>
<p>Nom de l'objet : {{ $store.getters.item }}</p>
</div>
</template>
...and finally my error
As I said, I tried a lot of things but none of them worked... Maybe I forget something ?
Thanks in advance for your help.
You need to dispatch to an action, then in the action, commit the value which will run your mutation. Also your state should be an object and not a function.
Here is a basic example:
export const store = new Vuex.Store({
state: {
item: ''
},
mutations: {
change(state, item) {
state.item = item
}
},
actions: {
change({ commit }, modifiedValue) {
// do some stuff
commit('change', modifiedValue)
}
},
getters: {
item: item => state.item
}
})
You should then be able to run your dispatch now:
this.$store.dispatch('change', event.target.value)
Finally I found my problem... I was importing the wrong store. Here's my final code and it's working !
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Thanks for any help !
I tried to create a first simple App but I have a problem with store.
I have in mainJS
import Vue from 'vue'
import Vuex from 'vuex'
import App from './App'
import router from './router'
Vue.use(Vuex);
import {store} from './Store.js';
store.commit('increment')
new Vue({
el: '#app',
router,
store,
template: '<div><App></App></div>',
components: { App }
});
So in my store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
});
So I would create a child component of App Component that use a event increment, so I have created a Component Counter
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
name: "Counter",
computed: {
count () {
return this.$.store.state.count
}
}
}
</script>
And I call this component from my App component that it is:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<Counter></Counter>
</div>
</template>
<script>
import Counter from './components/Counter.vue'
export default {
name: 'app',
components:{
Counter
}
}
</script>
But I have this error in my Counter component:
[Vue warn]: Error in render: "TypeError: Cannot read property 'store'
of undefined"
found in
---> at src\components\Counter.vue
at src\App.vue
You only made a small mistake: It has to be $store, not $.store:
<template>
<div>{{ count }}</div>
</template>
<script>
export default {
name: "Counter",
computed: {
count () {
return this.$store.state.count
}
}
}
</script>
I had the same problem and changing from Vue to vue and Vuex to vuex in all lines of .js store file I got it working.