I've been running into a warning that I want to hide/fix. I read you can hide warnings using Vue.config.ignoredElements, and have added the code below in my main.js file:
Vue.config.ignoredElements = [
'slot v-bind without argument expects an Object',
'Expected Object, got Array',
'v-bind without argument expects an Object or Array value'
]
Is there a specific option I need to add? or a better way to fix this problem?
This issue might be related: https://github.com/vuejs/vue/issues/6677
I think you've misunderstood. ignoredElements solves a very specific problem.
Typically when Vue is rendering it comes across 3 types of element:
HTML elements, such as <div>.
Special Vue elements, such as <template> or <slot>.
Components, such as <v-select>.
Vue has a list of HTML elements hard-coded so that it can identify the first group. See:
https://github.com/vuejs/vue/blob/399b53661b167e678e1c740ce788ff6699096734/src/platforms/web/util/element.js#L11
If it comes across an element with a name it doesn't recognise it will log an error. Most of the time that's fine but occasionally you might need Vue to treat an unknown element just like a plain HTML element. That can be achieved by adding it to ignoredElements. See https://v2.vuejs.org/v2/api/#ignoredElements for more details.
It is not used to suppress warning messages more generally.
You mentioned three messages:
slot v-bind without argument expects an Object
Expected Object, got Array
v-bind without argument expects an Object or Array value
In all cases these mean that there's a bug in your code. You shouldn't be trying to suppress these warnings, you should be fixing the bugs.
Related
As mentioned, I'm using the Marvel API. At mounted() I use this action:
mounted() {
this.$store.dispatch("get/getCharacter", this.$route.params.id);
},
This uses axios to call for the character object, and sends that payload to a mutation, which updates the state of character: {}. I use a getter to call the state of the character to output in my page. Everything works, the image appears and if I interpolate the string to the page, that appears as it should. However, I'm still getting the typeError. I'm creating the img like this:
<img :src="`${character.thumbnail.path}/portrait_incredible.${character.thumbnail.extension}`
So, doing this {{ character.thumbnail.path }} outputs the correct 'path' string from the object. The image loads perfectly on my computer too, but not on my Oppo phone (I've uploaded it to Netlify to check). Strangely, my friends iPhone does load the images using the Netflify link.
What am I doing wrong, and how can I make this error go away?
Thanks for any help!
I know this question is old, but I would like to give my solution since no one has answered this question. So it may help someone in future.
You can use the optional chaining operator to solve this,
The ?. operator is like the . chaining operator, except that instead of causing an error if a reference is nullish (null or undefined), the expression short-circuits with a return value of undefined. When used with function calls, it returns undefined if the given function does not exist.
See Optional chaining (?.)
character.thumbnail?.path
character.thumbnail?.extension
I'm trying to save an Object on form.values to work with it later on a Query.
The problem is, even I have used it on another project, this time it gives this error:
Does anyone have some clue about this?
The specific line I'm inputting this is this one:
onChange={form.handleChange('MultipleSelect')({})}
I'm not sure, but I think it is not finding the '_eventOrTextValue' function...
I have tried passing integers, objects, arrays, but the only kind of value it accepts is string...
Oddly I used this same mirrored function on another project the same way...
According to the docs: https://mobx.js.org/refguide/array.html
I should be able to observe an array.
observe(listener, fireImmediately? = false) Listen to changes in this
array. The callback will receive arguments that express an array
splice or array change, conforming to ES7 proposal. It returns a
disposer function to stop the listener.
However I'm getting an exception when I do so within my app:
core.js:1350 ERROR Error: Uncaught (in promise): Error: [mobx] Cannot obtain administration from Neil Clayton,Ralph Lambert,Suzie Legg
at invariant (mobx.module.js:2652)
at fail$1 (mobx.module.js:2647)
at getAdministration (mobx.module.js:1967)
at observeObservable (mobx.module.js:3606)
at observe (mobx.module.js:3603)
at ObjectChangeTracker.webpackJsonp.683.ObjectChangeTracker.installObserverDirectlyOn (orm-change-detection.ts:258)
I'm unsure why getAdministration() is falling through.
I was under the impression I could pass anything into observe() (either a JS Object, real class or array thereof).
Am I mistaken that I can observe an array?
It turns out I was trying to observe a direct 'Array'.
This was happening because I was iterating the parent object keys, and getting the values by doing parent[propertyName]. Where 'propertyName' is provided by some other object (i'm intentionally leaving out specifics so as to not complicate my answer).
This was a couple of days ago now, but from memory this caused access via a getter, which had a side effect (returned a sorted array, new object, that wasn't observable).
If instead I got the value by the private field directly, and then observed the actual ObservableArray, my problems disappeared.
So, no longer convinced my question is valid.
Code is here: https://github.com/scornflake/scheduler
(but not expecting anyone to take a look, it's reasonably convoluted at the moment)
In vue 1 it was possible to do this:
<app v-ref:test-app></app>
and then reference it like so:
vm.$refs.testApp;
however in vue 2 the syntax for the ref has changed to:
<app ref="test-app"></app>
but this no longer can be referenced by
vm.$refs.testApp
instead it only works if:
<app ref="testApp"></app>
which in standard DOM stuff isn't allowed. Is it a bug? can kebab case no longer be used?
Since the syntax has been changed from that of a namespaced element attribute (i.e., v-ref:foo-bar) to a normal key-value-pair attribute (i.e., ref="fooBar"), the implicit kebab-case-to-camel-case conversion is no longer applicable because the reference name is a plain string and is not constrained by having to conform to the requisite lowercase-kebab-case HTML syntax.
In other words, you can identify a ref with any string, so it wouldn't make sense for Vue to manipulate it. Have a look at this CodePen for an example in action of what I mean.
But, basically, a plain string ref value means you can define a reference like this:
<div id="app" ref="test ** app!"></div>
and reference it from Vue like this:
this.$refs['test ** app!']
In short, no, it's not a bug but no, automatic kebab-case conversion no longer takes place.
I'm trying to render a React Native ListView in reagent.
I have the following snippet:
(def data-source
(React.ListView.DataSource. #js{:rowHasChanged (fn [a b] false)}))
(defn render-row []
[ui/view])
(def rows
(clj->js ["whoa", "hey"]))
(defn main-scene []
(fn []
[ui/list-view {:render-row render-row
:data-source (.cloneWithRows data-source rows)}]))
The above leads to "Failed propType: Required prop dataSource was not specified in ListView. Check the render method of app.ios.ui.main_scene." Which is followed by "Cannot read property 'rowIdentities' of undefined" as the data source is undefined inside the render method of the ListView.
My first guess was there was some special treatment of the "data-" attributes somewhere in the internals of either reagent/hiccup or whatever, but I couldn’t find a single clue to why the property is not propagated properly.
And, yep, (.cloneWithRows data-source rows) actually returns a valid ListViewDataSource object instance.
And then if I pass :data-source as :dataSource all I get is a puzzling "StaticRenderer.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object."
I’m using react-native 0.18.1 and reagent 0.5.1 with re-frame 0.6.0. I have checked this with reagent 0.6.0-alpha and re-frame 0.7.0-alpha and got the same errors.
I've been digging this for several hours and I guess I need some help. Any hints/ideas to try to fix this, any references in the code to look at? Thanks a ton in advance.
Well, the first thing is the data source should be passed to the view as :dataSource and not as :data-source. The latter doesn’t work for whatever reason. As a side note, the render row method can both be passed as :render-row or :renderRow and it works both ways. Heh.
Secondly, the render-row function should return a React component and not an array. The latter would be okay if the array was later rendered by reagent, but the listview doesn’t do any kind of post-processing on the data it gets from render-row and merely tries to return that to React, which bails if it’s a plain clojure array.
So the above render-row function should be written as:
(defn render-row []
(r/as-element [ui/view]))
And then everything works fine. :)