I am working on laravel / vue project and i want to pass a value from laravel blade to the vue component but i get this error :
Missing required prop: "id" at
The vue component:
export default {
props:{
id:{
required : true
}
},
mounted() {
console.log(this.id)
},
}
The Laravel blade:
<div id="add_product">
<add-product :id="{{$product_id}}"></add-product>
</div>
https://router.vuejs.org/guide/essentials/passing-props.html
you should add props true to router
{ path: '/user/:id', component: User, props: true },
Edit :
Just remove : from :id
<add-product id="{{$product_id}}"></add-product>
Related
My component where I want to route to Laravel Notice the question in the href in the script: The idea is actually to return me from the Vue component to a Laravel view. I have realized that vue router allows me to go perfectly from one vue component to another vue component and what I need is to go from a link in a vue component to a laravel view that belongs to a web route
<template>
<div>
<v-breadcrumbs
:items="items"
divider="."
></v-breadcrumbs>
</div>
</template>
<script>
export default {
data: () => ({
items: [
{
text: 'Dashboard',
disabled: false,
href: 'how do i add a laravel web route here?',
},
{
text: 'Link 1',
disabled: false,
href: 'breadcrumbs_link_1',
},
{
text: 'Link 2',
disabled: true,
href: 'breadcrumbs_link_2',
},
],
}),
}
</script>
i want to pass a value from laravel blade to a Vue Component:
my Laravel blade:
<div id="add_product">
<add-product :id="{{$product_id}}"></add-product>
</div>
my vue component:
export default {
props:{
id:{
required : true
}
},
mounted() {
console.log(this.id)
},
}
the problem is that i get this error :
Missing required prop: "id" at AddProduct
it took me 4hours trying to find out the problem, hope you can help.
The Repo:
https://github.com/SimodevStuff/shopify-add-product-clone
Edited:
try
<div id="add_product">
<add-product id="{{$product_id}}"></add-product>
</div>
id without :.
in Vue prop prefixed with : is a shorthand for v-bind. Meaning, you are binding a property to the component. But you need to pass a value.
I'm working on creating reusable form inputs using vue + laravel.
I have one prop that is required, and I pass it and it renders as expected, but the console still logs the error:
"Vue warn]: Missing required prop: "inputId"".
Inspecting the vue element shows the prop as defined. Why is an error being generated while the the data is being passed?
Text Input Component
<template>
<input type="text" :name="inputId" :id="cssid" :placeholder="placeholder" :value="value">
</template>
<script>
export default {
props: {
inputId: {
type: String,
required: true,
},
isRequired: {
type: Boolean,
default: false,
},
placeholder: {
type: String,
},
value: {
type: String,
default: '',
},
},
mounted() {
console.log('text mounted.')
},
computed: {
cssid() {
return this.inputId + '_selection';
},
},
}
</script>
Fragment of blade view where component is being called (I've tried with title in quotes and not in quotes, no difference)
<text-input
input-id="title"
></text-input>
Resultant html Result is correct, but why the error?
<input type="text" name="title" id="title_selection">
In this case, I had two instances of the component and I didn't realize the older one was there. The older one didn't have the prop declared and was giving the error, but it wasn't obvious in the console that I had loaded it twice. Removing the older instance of the component fixed the error.
I am using Laravel 7 and Vue.js 2.
I want to pass an eloquent query result from a controller to a Vue.js component (passing through a View and another component).
This is my controller:
$permissions = Permission::select('id')->get();
return view('admin')->with(['permissions'=>$permissions]);
This is my view:
<div id="app">
<admin-panel :permissions="{{ $permissions }}"></admin-panel>
</div>
This is admin-panel component (passing data through props):
<template>
<div>
<admin-operations></admin-operations>
<hr>
<insert-employee :permissions="permissions"></insert-employee></div>
</template>
This is insert-employee component script:
<script>
export default {
components: {
},
props: ['permissions'],
mounted() {
console.log('Component mounted.');
},
computed:{
},
data: function() {
return {
}
},
methods: {
}
}
</script>
This is the select in insert-employee component:
<select required v-model="permissions" class="form-control" id="permissions">
<option v-for="permission in permissions" :value="permission.id" :key="permission.id">
{{ permission.id }}
</option>
</select>
The results of the query should be visualized in the select options.
However in the select I can visualize correctly the values in the options, but when I select an option the selection doesn't work and in the console appears two times the following warning:
app.js:40160 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "permissions"
found in
---> <InsertEmployee> at resources/js/components/InsertEmployee.vue
<AdminPanel> at resources/js/components/AdminPanel.vue
<Root>
Can help?
Let's try this. I think we're just mixing the values up a bit. I'll try to think of props that are passed in as a read only thing. In this case permissions is an array that holds the id's of each permission.
Next we'll want to use that array to give our user object some values. This way we aren't trying to manipulate values of permissions. That's where Vue was initially getting angry.
<script>
export default {
components: {},
props: {
permissions: {
type: Array,
required: true,
default: () => [],
}
},
mounted() {
console.log('Component mounted.');
},
computed:{},
data: () => ({
user: {
permissionId: "",
}
}),
methods: {},
}
</script>
Then in your component template:
<select required v-model="user.permissionId" class="form-control" id="user-permissionId">
<option v-for="permission in permissions" :value="permission.id" :key="permission.id">
{{ permission.id }}
</option>
</select>
Hi Iam using laravel 8 and vue.js
so my problem is that the functions on my mixin is not being recognize
this is QuestionMixin.js
export default {
data(){
return{
ifClicked:true,
items:[
{
answer:null,
choices:[],
question:null
},
]
}
},
methods:{
AddQuestion:function(){
var insert = {
answer:null,
choices:[],
question:null
}
this.items.push(insert);
},
},
}
and here is my component
<template>
<section id="q-main">
{{ ifClicked }}
</section>
</template>
<script>
import QuestionMixin from "./mixins/QuestionMixin";
import QuestionHolderComponent from "./QuestionHolderComponent.vue";
export default {
components:{
'QuestionHolderComponent':QuestionHolderComponent
},
mounted() {
},
mixins:['QuestionMixin'],
}
</script>
and this is the error i recieved
[Vue warn]: Property or method "ifClicked" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> at resources/js/components/QuestionComponent.vue
``
The mixin shouldn't be passed as string, you should add the imported mixin object to the array of mixins option:
mixins:[QuestionMixin],