This content originally appeared on CodeSource.io and was authored by Deven
In this article, you will learn about How to “Fix vue avoid using non-primitive value as key, use string/number value instead”
Recently, I was working with VueJS and wanted to print a few data using v-for. My data was printing perfectly in the browser but I got the below warning message in my console even though I used :key.
If you have ever faced this warning in your console and don’t know how to fix it. Then you do not need to worry because I will show you how to fix this warning. Let’s see what I did wrong in the below code:
The warning I was getting was because I used non-primitive value as key. You can see red marked in the picture. I was using a student Object which is prohibited.
Solution : The solution is very simple. If you notice the warning message carefully and have a little knowledge about JavaScript basics you can solve it on your own. On that warning message, it was indicating about not to use non-primitive values and suggested to use String/Number value. All you need to do is to add a String/Number value as the key. In my case, I added string value as the key which is the “name”. You can use (.) to get access in your Object properties See the below code example:
The moment I added student.name value as :key the warning was gone magically and this is how you can “Fix vue avoid using non-primitive value as key, use string/number value instead”
The post How to “Fix vue avoid using non-primitive value as key, use string/number value instead” appeared first on CodeSource.io.
This content originally appeared on CodeSource.io and was authored by Deven
Deven | Sciencx (2021-12-23T09:27:17+00:00) How to “Fix vue avoid using non-primitive value as key, use string/number value instead”. Retrieved from https://www.scien.cx/2021/12/23/how-to-fix-vue-avoid-using-non-primitive-value-as-key-use-string-number-value-instead/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.