Vuejs Warning expected boolean found string - vuejs2

I am new to Vuejs, i just install vue-flip plugin at Nuxtjs and write this tag:
This is the tag at index.vue:
<vue-flip active-hover="TRUE" class="flip">
and at the console i see this warning :
[Vue warn]: Invalid prop: type check failed for prop "activeHover". Expected Boolean, got String with value "TRUE"
I try to change from true to 1, but the keeps still remains
The message point to this location
At:
---> <Flip> at src/Flip.vue
<Pages/index.vue> at pages/index.vue
<Nuxt>
<Layouts/default.vue> at layouts/default.vue
<Root>
How can i get rid of this message ?

Instead of
<vue-flip active-hover="TRUE" class="flip">
you should use
<vue-flip v-bind:active-hover="true" class="flip">
or shorter
<vue-flip :active-hover="true" class="flip">

The default when providing a prop with no value is true
Change this
<vue-flip active-hover="TRUE" class="flip">
to
<vue-flip active-hover class="flip">

I had a very similar issue; I was passing a boolean prop to a child component from a vuex store. My issue was my getter was actually a string & in my component I was validating that it was a boolean.
Error:
[Vue warn]: Invalid prop: type check failed for prop "userIsAuthenticated". Expected Boolean, got String with value "true"
Here is how I resolved my issue.
// ParentComponent.vue
...
computed: {
userIsAuthenticated() {
return this.$store.getters["user/authenticated"]; // String
return this.$store.getters["user/authenticated"] === "true"; // Boolean
},
}
// ChildComponent.vue
...
props: {
userIsAuthenticated: {
type: Boolean,
required: true,
default: () => false,
},
}
To expand a bit more, in my vuex store I could also have done this:
export const state = {
authenticated: (localStorage.getItem("authenticated")) ?localStorage.getItem("authenticated") === "true" : false,
}

Related

Vue Warn: Property or method is not defined on the instance but referenced during render

I have a model name defined in my Component tag as seen below:
<b-table-column v-if="" field="columnName" v-slot="itemProps">
<SelectableAttribute
:attr-name="props2.row.fieldClass"
:attr-id="itemProps.row.id"
:model-id="props.row.id"
:model-name="NewParticipant"
>
However I receive this error:
[Vue warn]: Property or method "NewParticipant" 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.
I'm not quite sure how I'm meant to define a model-name, in my props I assume but where? I've attached code below.
export default {
props: {
participants:
{
type: Array,
default: null
},
},
components: {
SelectableAttribute
},
As your error tells you, NewParticipant is not defined. You need to add it to your component as a property in data(), like this:
data() {
return {
NewParticipant: [] // Array for example
}
}
Or else, if you want your prop participants to be the model-name, you need to change it to :model-name="participants".

Vue Prop default() function returns the Object as a String instead of an Object

I have a component that defines a prop "actionOptions" of type Object. Also, this prop defines a default() function that returns an object with default values.
actionOptions: {
type: Object,
default: () => ({
columnLabel: 'Actions',
}),
},
Inside mounted() I try to print this prop: console.log(this.actionProps) the result in the Dev Tools is:
{
columnLabel: 'Actions',
}
With a warning of:
Invalid prop: type check failed for prop "actionOptions". Expected Object, got String with value "{
columnLabel: 'Actions',
}"
For some reason, Vue is returning the default function results as a string rather than executing it.
I am using vue v^2.6.11. I tried an example on CodeSandbox.io and it works fine there.
Appreciate your assistance.
You haven't shared the code where you are calling this component in the parent, but this error is most likely happening there. I assume currently, your code in the parent looks like this:
<ChildComponent action-options="{columnLabel: 'Actions'}" />
This means that the prop is being passed as a string. If you want to send it as an object you should change it to:
<ChildComponent :action-options="{columnLabel: 'Actions'}" />
This way Vue knows it's a JavaScript object and not a string. Read More
If this doesn't solve the problem, please share the other parts of your both components.

[Vue warn]: Property or method "Boston" is not defined on the instance but referenced during render

I'm setting up some props, as shown below.
Component 1 (Parent):
<template>
<div>
<span>{{agency1}}</span>
<span>{{workstation}}</span>
</div>
</template>
<script>
export default {
name: "work-station-view",
props: {
agency1: {
type: String
},
workstation: {
type: Number
}
},
data() {
return {};
}
};
</script>
Component 2 (Child):
<template>
<WorkStationView :workstation="1.1" :agency1="Boston" />
</template>
The workstation prop renders fine, but the agency1 prop doesn't show up at all. I get this message from Vue in the console:
[Vue warn]: Property or method "Boston" 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.
I checked the docs, as it says to define it in data(), so I did a combination of all of these (probably more) to no avail:
// attempt 1
data() {
agency1 = this.agency1;
return {};
}
// attempt 2
data() {
return {
agency1 = this.agency1;
};
}
// attempt 3
data() {
return {
agency1: '';
};
}
If I use a number value for agency1 (<WorkStationView :workstation="1.1" :agency1="3" />), it shows! What is going on?
If you're using an inline string, you should skip the : or quote your string.
The : is short-hand for v-bind and is expected to be used with variables that you're binding when passing attributes from the parent component to the child. In this case, you don't have a variable called Boston in the parent context, and hence the error from Vue.
If all you want to do is use a constant string like Boston, just use it like
<WorkstationView :workstation="1.1" :agency="'Boston'" />
Alternatively, it would've also worked if you did the following:
<WorkstationView :workstation="1.1" agency="Boston" />
:agency1="Boston" is shorthand for v-bind:agency1="Boston". It attempts to bind a data property named Boston, but you don't have one defined. :agency1="3" works because 3 is a literal. If you were attempting to assign the literal string "Boston" to agency1, don't use the preceding colon:
<!--
<WorkStationView :agency1="Boston">
--> <!-- DON'T DO THIS -->
<WorkStationView agency1="Boston">

VueJs + Element-ui: how to get native event from input

I am trying to get the event from the #input.native attribute of a el-input tag.
Here the template code:
<el-input :value="filter.name" #input.native="updateFilter"></el-input>
And the script code:
updateFilter (e) {
console.log(e.target.value)
}
My filter.name has been initialized with value "aaa", then I type "b" in the field. For some reason, the output on the log is "aaa" but I need the "aaab" value instead.
Also I can't use #input because it return only the value, I need other attributes too.
Are there anyway to get the valid native input event?
#Update: I am using Vuex so v-model is not an option
let's just do v-model with Vuex, and it is very simple :
export default : {
...
computed : {
filter : {
get () { return this.$store.state.filter; };
set (val) { this.$store.commit("setFilter", val);
}
}
...
}
And then v-model onto filter will be magical.
You can use computed method. Take one temporary variable and add that variable as v-model to your input. Whenever value is changing assign that variable to vuex store variable(nothing but string concatenation). You can use setters and getters in computed.
Following link might help.
assigning value to vuex store variable using computed setters and getters
I believe you are doing everything right. However, the value can't get updated unless you bind the model (using v-model="filter.name") instead of doing :value.
Here is what I did:
HTML
<el-input
class="small"
controls-position="right"
:value="someValue"
#input.native="someFunction">
</el-input>
Script
<script>
export default {
name: "CustomizeSmtCampaign",
data: function () {
return {
someValue: 'test'
}
},
methods: {
someFunction: function (val = '1') {
console.log('Event Value', val.target.value, ' some value: ', this.blankValue);
}
}
}
</script>
Output
This is the output I got on console as I typed
Event Value teste some value: test
Event Value tester some value: test
Event Value testere some value: test
Event Value testerer some value: test
Event Value testerere some value: test
So your code must be working.
What is wrong, then?
What's wrong is that you are binding to the value, not to the model.
When I changed the :value="someValue" to v-model="someValue", the following was the output:
v-model Output
Event Value teste some value: teste
Event Value tester some value: tester
Event Value testere some value: testere
Event Value testeree some value: testeree
Event Value testereer some value: testereer
Event Value testereere some value: testereere
Summary
Always bind the value using v-model (not using :value). That's how Vue achieves the reactiveness!
Hope that helped.

Why does my unit test fail to return the text within a single-file component where I set that text with $el.innerText on the mounted hook?

Summary of Problem
I have content-editable div that receives a content property whose default value is an empty string. Instead of using mustache syntax to render the property {{ content }}, I set the elements innerText via the mounted hook:
mounted() {this.$el.innerText = this.content}
I've created a unit test to verify the text of the component contains the mocked property I passed into the test.
The component renders properly in the browser, but the unit test fails, alerting me that it didn't find any text.
Things I've tried
If I log wrapper.vm.$el.innerText I see the string I mock.
If I use mustache syntax (and not the mounted method) i.e <div>}{{ content}}</div>, the test passes.
Vue single-file component
<template>
<div
contenteditable="true"/>
</template>
<script>
export default {
props: {
content: {
default: '',
type: String,
},
},
mounted() {
this.$el.innerText = this.content;
},
}
</script>
Unit test
describe('BaseEditable.vue', () => {
it('renders content property', () => {
const wrapper = shallowMount(BaseEditable, {
propsData: {
content: 'some random string',
},
});
expect(wrapper.text()).toContain('some random string');
});
What I expect, and what I got
I expect the test to pass.
However, the result I receive is:
expect(string).toContain(value)
Expected string:
""
To contain value:
"some random string"
I have no idea why this happens, but I was able to reproduce your error and "fix" it by using
this.$el.innerHTML = this.content;
instead of
this.$el.innerText = this.content;
EDIT:
I'm not completely sure of this, but vue-test-utils uses jest with jsdom by default, and according to this issue, they haven't implemented innerText yet.