Can someone help me with passing a method from a parent to a child component in vue.js? I've been trying to do it by passing the method in as a prop...
My parent component snippet:
methods: {
test: function () {
console.log('from test method')
}
}
<template>
<child-component test="test"><child-component>
</template>
Child component snippet
created: {
this.test() //returns test is not a function
},
props: ['test']
Can someone help?
Thanks in advance!
You are trying to pass a function as literal as described here. You end up with test prop being String... You should use : to indicate dynamic binding as follows:
<child-component :test="test"><child-component>"
Related
I want to update a custom property value inside a child component,
and also want to get event whenever the value is changed.
So, I tried both v-model: and #update:, like this.
<CustomName v-model:custom-name="name"
#update:custom-name="nameChanged"/>
// CustomName.vue
<script>
export default {
name: 'CustomName',
props: {
customName: String
},
emits: ['update:customName'],
setup(_, {emit}) {
const customNameChanged = (event) => {
emit('update:customName', event.target.value)
}
return {
customNameChanged
}
}
}
</script>
<template>
<input :value="customName" #change="customNameChanged"/>
</template>
I expected that name is changed and nameChanged is called,
but name is not changed.
I tried some cases at the vue sfc playground.
The result is,
(1) When I use camelCase, value is updated and method is called.
<CustomName v-model:customName="name4"
#update:customName="nameChanged"/>
(2) But when I use kebab-case, value is NOT changed and method is called.
<CustomName v-model:custom-name="name3"
#update:custom-name="nameChanged"/>
(3) Without #update:, camelCase and kebab-case are worked well.
<CustomName v-model:custom-name="name1"/>
<CustomName v-model:customName="name2"/>
Is this right? Is it illegal to use v-model with #update? Or should I use camelCase?
I want to access a variable $count from my controller and access it to a vue component (frontend). currently have this code on my controller:
public function index()
{
$count = User::where('created_at', Carbon::today())->count();
return view('user.index', compact('count'));
}
i am quite new to laravel and vuejs so please help me out. thank you!
Send count as a prop from blade to component
<your-component-name :count="{{ $count }}"></your-component-name>
And from your component, receive that prop
<template>
<div>
Count is {{ count }}
</div>
</template>
<script>
export default {
props: {
count: {
type: Number
}
}
}
</script>
To pass down data to your components you can use props. Find more info
about props over here. This is also a good source for defining those
props.
You can do something like:
<example :userId="{{ Auth::user()->id }}"></example>
OR
<example v-bind:userId="{{ Auth::user()->id }}"></example>
And then in your Example.vue file you have to define your prop. Then
you can access it by this.userId.
Like :
<script>
export default {
props: ['userId'],
mounted () {
// Do something useful with the data in the template
console.dir(this.userId)
}
}
</script>
the above question was answered in below question
Pass data from blade to vue component
I try to add my custom component to my Laravel Spark instance and always get the error:
Property or method "obj" is not defined on the instance but referenced during render..
It all works fine if i only bind a data value (ex. "testkey") without a loop...but if i add the for loop i receive this error...so my code:
app.js (spark)
require('spark-bootstrap');
require('./components/bootstrap');
//my new Component
import OmcListObjects from './components/modules/omc/objectlist.vue';
Vue.component('omc-objectlist', OmcListObjects);
var app = new Vue({
mixins: [require('spark')]
});
my Component (objectlist.vue)
<template>
<div :for="(obj in objlist)" class="property-entry card col- col-md-4 shadow-sm">
</div>
</template>
<script>
export default {
data () {
return {
objlist: [{title: 'test1'}, {title: 'test2'}],
testkey: 'testval'
}
}
}
</script>
I think you mean by :for the v-for directive, directives are always prefixed by v- like v-for one in which the compiler can recognize the obj variable as an temporary element used in the loop, but if you set :for which is recognized as a prop bound to a data or another property.
i am already sending a variable from laravel to my vuejs like below : but when i want to use it in a component as an string it gives not defined error my vue component code is like below
export default {
props: ['reserve_end'],
data(){
return {
date: '',
}
},
}
// the component part
import VuePersianDatetimePicker from 'vue-persian-datetime-picker'
Vue.use(VuePersianDatetimePicker, {
name: 'custom-date-picker',
props:
{
min: //i want to use the reserve_end here as an string
}
});
and finally the html markup
<custom-date-picker v-model="date"></custom-date-picker>
but in the end it wont load and gives error that reserve_end is not defined i want to know how can i pass this reserve_end to the datepicker as an string
here is the devtoll picture of tracing
// First component (getting value from Laravel):
export default {
props: ['reserve_end']
}
Now, in the first component, you should have an access to this.reserve_end.
// template of first component
<template>
<second-component :date="reserve_end"></second-component>
</template>
Let's pass the value to another component, using same technique - props.
// Second component (getting value from first component
export default {
props: ['date']
}
Now, in the second, component we can:
{{ date }}, to get the date :)
However, don't forget to inspect each component Vue devtools.
I would like to add a dynamic child component to a parent component using Nativescript-Vue. For example:
<template>
<MyParentComponent>
<MyChildComponent :foo="foo"></MyChildComponent>
</MyParentComponent>
<template>
<script>
import MyParentComponent from './components/MyParentComponent';
import MyChildComponent from './components/MyChildComponent';
export default {
components: {
MyParentComponent,
MyChildComponent
},
data: function(){
return {
foo: ''
}
}
}
</script>
I think I need to define a slot in the parent component where the child component should be inserted, but I don't know how this should be done.
Any ideas?
In MyParentComponent's template you need to add a <slot /> tag, that's where Vue will insert the content.
Read more about slots, and what they can do in the Vue docs:
https://v2.vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots