This is the third day of my participation in Gwen Challenge
There are all kinds of classic problems encountered during front-end development, especially for beginners. Emitted value instead of an instance of Error Emitted by a Vue project is a classic Emitted value of an instance of Error encountered by developers new to front-end development, including a solution and mechanism.
First, let’s reproduce the error message
After running the project, the project does not run and has an error as shown below:
(Emitted value instead of an instance of Error) van-cell v-for=" item in this.todoList": component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
Because of the above warning, the Vue project cannot be started. Through analysis of the above warning, the general meaning of the warning is that although v-for is used in the component, the key is not set, which will cause a non-unique problem. Through the official Vue documentation, also explained when using V-for to set the key.
Solutions to the above problems
The solution to the above problem is also very simple, just add a key to the component that has the warning v-for, bind a key to the element, such as v-for=»(item, index) in this.todolist «:key=»index» operation. Here is an example:
van-cell v-for="(item, index) in this.todoList" :key="index"
:to="{ name: 'Approval/Detail', params: { id: item.businessId } }"
van-icon name="bell" size="30" /
div class="info-right"
p class="user-info"{{ item.startBy }}/p
p class="place"{{ item.processInstanceName }}/p
/div
/van-cell
Copy the code
According to the above example, the Emitted Error problem mentioned at the beginning of this article can be effectively solved, and it perfectly solves the problem of Emitted value instead of an instance of Error.
Use principle to solve the above problems
When v-for is used for list rendering, the virtual DOM is different from the real DOM and cannot be unique. Binding a key to the element ensures uniqueness, which is also recommended by Vue.
conclusion
Through the problem points explained in this paper, although the problem is simple, but more classic, it is worth learning from xiaobai. Again in the future development of the same type of problem, can be very good to solve, only in the early stage of development, with the precipitation and in-depth technology, looking back at this problem will feel very simple, more or record use.
The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan «Program Ape by Sanzhan», and the Sina Weibo account of Sanzhan «Sanzhan 666», welcome to pay attention!
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.
Already on GitHub?
Sign in
to your account
Comments
Module Warning (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) the «scope» attribute for scoped slots have been deprecated and replaced by «slot-scope» since 2.5. The new «slot-scope» attribute can also be used on plain elements in addition to to denote scoped slots.
What is wrong with that(?):
<template slot="item" slot-scope="prop">
<configuration-form v-model="prop.item" @input="isValid"></configuration-form>
</template>
Hello, thank you for taking time filling this issue!
However, we kindly ask you to use our Issue Helper when creating new issues, in order to ensure every issue provides the necessary information for us to investigate. This explains why your issue has been automatically closed by me (your robot friend!).
I hope to see your helper-created issue very soon!
Are you seriously? — it is disrespect to your customers
- You are not a customer. You are using open source software for free.
- Not following the guidelines is disrespectful to the maintainers.
vuejs
locked as resolved and limited conversation to collaborators
Jul 10, 2019
tried using google maps with vue js and was told to use this package
started a project using vue cli
vue init webpack-simple googleMapsTest
than:
npm install vue2-google-maps
my App.vue file:
<template>
<div id="app">
<gmap-map :center="center" :zoom="7" style="width: 500px; height: 300px">
<!--<gmap-marker v-for="m in markers" :position="m.position" :clickable="true" :draggable="true" @click="center=m.position"></gmap-marker>-->
</gmap-map>
</div>
</template>
<script>
import Vue from 'vue';
export default {
name: 'app',
data () {
return {
msg:'maps',
center: {lat: 10.0, lng: 10.0},
markers: [{
position: {lat: 10.0, lng: 10.0}
}, {
position: {lat: 11.0, lng: 11.0}
}]
}
}
}
</script>
my main.js file:
import Vue from 'vue'
import App from './App'
import router from './router'
import * as VueGoogleMaps from 'vue2-google-maps';
Vue.config.productionTip = false
Vue.use(VueGoogleMaps, {
load: {
key: 'AIzaSyA3NiPLBKub4wefs0jU83v6m3-Q24ZOUDws', //not realy my api key
v: '3.26',
// libraries: 'places', //// If you need to use place input
}
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
}
})
getting error:
WARNING in ./~/vue-loader/lib/template-compiler?{"id":"data-v-5ab6ec5a"}!.
(Emitted value instead of an instance of Error) <gmap-marker v-for="m in m
@ ./src/App.vue 9:2-170
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev
so i commented out the : gmap-marker tag
no map and also got this error:
(node:2414) DeprecationWarning: loaderUtils.parseQuery() received a non-st
parseQuery() will be replaced with getOptions() in the next major version
how can i use google maps in vue2?
Website content quality is poor, distribution efficiency is too low how to do?Huawei engineers offer 5 unique skills>>> 
Share a classic error that developers who have just come into contact with front-end development often encounter, that is, the problem of “emitted value instead of an instance of error” in the running of Vue project, with the method and principle to solve the problem.
Repeat error prompt:
(Emitted value instead of an instance of Error) < van-cell v-for=” item in this.todoList”>: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.
Due to the above warning, the Vue project cannot be started. The general meaning of the warning is to use V-for in the component, but the key is not set, which will cause non uniqueness problems.
The solutions to the above problems are as follows
In the warning component, an attribute key is added after V-for to bind a key to the element. V-for = (item, index) in this.todolist “: key =” index “operation, that is:
<van-cellv-for="(item, index) in this.todoList" :key="index":to="{ name: 'Approval/Detail', params: { id: item.businessId } }"><van-icon name="bell" size="30" /><div class="info-right"><p class="user-info">{{ item.startBy }}</p><p class="place">{{ item.processInstanceName }}</p></div></van-cell>
The above operation avoids the problem of emitted value instead of an instance of error.
Principle of use:
When using V-for for list rendering, the virtual DOM is different from the actual Dom and cannot be unique. Binding a key to an element can ensure the uniqueness operation, which is also the official recommendation of Vue.
The above is the whole content of this chapter. Welcome to the WeChat official account of the three shopkeeper, “iOS development by three shopkeeper”, three shopkeeper’s Sina micro-blog “three shopkeeper 666”, welcome to pay attention!
Three WeChat’s official account:
Sina Weibo of three shopkeepers:
this article is shared by WeChat official account – iOS development by three shopkeeper (sanzhanggui777).
I got this compiling warnings after applying this NUXT tutorial for adding Bulma as Global CSS:
nuxt-starter@1.0.0 dev /home/lsoave/Vue/nuxt-starter
nuxt
nuxt:build App root: /home/lsoave/Vue/nuxt-starter +0ms nuxt:build
Generating /home/lsoave/Vue/nuxt-starter/.nuxt files… +2ms
nuxt:build Generating files… +8ms nuxt:build Generating routes…
+13ms nuxt:build Building files… +31ms nuxt:build Adding webpack middleware… +688ms ████████████████████ 100%
Build completed in 5.51s
WARNING Compiled with 14 warnings
13:30:56
warning in ./node_modules/bulma/css/bulma.css
(Emitted value instead of an instance of Error)
postcss-custom-properties:
/home/lsoave/Vue/sass/grid/columns.sass:469:4: Custom property
ignored: not scoped to the top-level :root element
(.columns.is-variable { … —columnGap: … })
@ ./node_modules/bulma/css/bulma.css 4:14-118 13:3-17:5 14:22-126
@ ./.nuxt/App.js @ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi webpack-hot-middleware/client?name=client&reload=true&timeout=30000&path=/__webpack_hmr ./.nuxt/client.js
…
Does anybody know why and how to get rid of those ?