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.
Related
I have a computed property that is not working correctly. When reading the docs this is how it should be done for Vue 2.x. The code i have:
<template>
<div>
<button :disabled="isDisabled">Import configurator data</button>
<input class="input" type="file" id="file" v-on:change="setFile">
</div>
</template>
<script lang="js">
export default {
data: () => {
return {
importDisabled: true,
}
},
computed: {
isDisabled() {
return this.importDisabled;
},
},
methods: {
setFile: (e) => {
this.importDisabled = false;
},
}
}
</script>
Expected behaviour: Button enables when a file is selected.
Actual behaviour: Button stays disabled.
What am i missing here? A console.log within the isDisabled() methods shows it is only called once. It is not called after importDisabled changes.
Other info:
vue 2.6.12
laravel nova
Also note: Vue tools does not detect a Vue component in the inspector. But the Vue behaviour is working when loading the tool.
It seems arrow functions are bound to the parent context. That was the reason my code did not work. this is then not bound to the Vue instance but the parent (Window) which causes it not to work.
Wrong:
setFile: (e) => {
this.importDisabled = false;
},
Right:
setFile: function() {
this.importDisabled = false;
},
More information:
https://codingexplained.com/coding/front-end/vue-js/using-es6-arrow-functions-vue-js
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],
I'm using vee-validate to validate an input. The validation is custom, as if the input is not valid, a modal is shown and the input value is reset.
I've managed to implement this logic, calling this.$refs.provider.validate(value) inside the handler of #change input event.
However, I've also tried to use the "validate" props callback provided by the ValidationProvider but alas without success. It would be possible to use that for a logic like the one I've described?
My current code:
<template>
<div>
<ValidationProvider
:rules="rules"
v-slot="{ errors, valid }"
ref="provider"
:name="name"
slim
>
<b-form-input
ref="inputField"
:value="inputValue"
:key="inputKey"
#change="changeInput"
v-bind="$attrs"
:placeholder="name"
:state="errors[0] ? false : valid ? true : null"
lazy
type="number"
/>
</ValidationProvider>
<div>
<b-modal hide-header ok-only :id="modalId">
Modal body
</b-modal>
</div>
</div>
</template>
<script>
import { ValidationProvider } from "vee-validate";
export default {
components: {
ValidationProvider,
},
props: {
inputIndex: {
type: String,
required: true,
},
name: {
type: String,
required: true,
},
rules: {
type: [String, Object],
default: "",
},
},
data() {
return {
inputKey: 0,
modalId: "modal" + this.inputIndex,
};
},
computed: {
inputValue: function () {
return this.$store.getters["form/getMisuraN"](this.inputIndex);
},
},
watch: {},
methods: {
changeInput: async function (value) {
await this.updateinput(value);
//other logic not relevant to the issue
},
async updateinput(value) {
const { valid } = await this.$refs.provider.validate(value);
if (!valid) {
value = "";
this.$bvModal.show(this.modalId);
}
this.$store.dispatch("setInputValue", {
index: this.inputIndex,
value: value,
});
this.inputKey++;
},
},
};
</script>
What I'd like to do:
<template>
<div>
<ValidationProvider
:rules="rules"
v-slot="{ errors, valid, validate }"
ref="provider"
:name="name"
slim
>
[...]
</template>
<script>
[...]
methods: {
// use the validate function instead of calling this.$refs.provider.validate(value) inside the // #change handler method
}
</script>
You can!
Get the validate out of the slot for the VP, and pass it to your changeInput event:
<ValidationProvider
:rules="rules"
v-slot="{ errors, valid, validate }"
ref="provider"
:name="name"
slim
>
<b-form-input
ref="inputField"
:value="inputValue"
:key="inputKey"
#change="changeInput($event,validate)"
v-bind="$attrs"
:placeholder="name"
:state="errors[0] ? false : valid ? true : null"
lazy
type="number"
/>
</ValidationProvider>
Then in your changeInput function you'd do something like this:
changeInput: async function (value,validate) {
await this.updateinput(value,validate);
//other logic not relevant to the issue
},
async updateinput(value,validate) {
const { valid } = await validate(value);
if (!valid) {
value = "";
this.$bvModal.show(this.modalId);
}
/...
}
I have two compoennts placed in one the same view.
#extends('layouts.app')
#section('content')
<bus></bus>
<bus2></bus2>
#endsection
I want to pass data (name) from one component to other one after clicking button. To do that I' using $emit function.
/// bus component
<template>
<div>
<p> Name Bus 1{{name}}</p>
<input type="button" #click="setName()" value="s"/>
</div>
</template>
<script>
export default {
created() {},
data: function() {
return {
name: "Volvo"
};
},
methods: {
setName: function(id) {
this.$root.$emit("sname", this.name);
}
},
props: []
};
</script>
///bus 2 component
<template>
<div>
<p> Name bus 2{{name}}</p>
</div>
</template>
<script>
export default {
created() {
this.$root.$on("sname", data => {
this.name = data;
});
},
data: function() {
return {
count: 0,
name: ""
};
},
methods: {}
};
</script>
Everything works fine. Name is transfered from bus to bus2. The problem exists when I place bus2 in different view - data are not transfered but code is the same. How can I transfer data between components placed in different views
Try using Vuex to specify your app state, and mutate this when it's necessary.
Vuex states are accessible from every components using this.$store or $store.