i am a beginner of vue js. while running the project i ran into the problem with Missing space before function parentheses and i got 3 errors i attached below.
✘ http://eslint.org/docs/rules/space-before-function-paren Missing space before function parentheses
src\components\HelloWorld.vue:14:7
data() {
^
✘ http://eslint.org/docs/rules/key-spacing Missing space before value for key 'helloWorld'
src\components\HelloWorld.vue:16:18
helloWorld:[
^
✘ http://eslint.org/docs/rules/no-multiple-empty-lines Too many blank lines at the end of file. Max of 0 allowed
src\components\HelloWorld.vue:23:1
what i tried so far i attached below.
<template>
<div class="container">
<h1>My To Do List </h1>
<hr/>
<div class="alert alert-info">
Task 01
</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data() {
return {
helloWorld:[
{ title: 'Task 01', complete: false }
]
}
}
}
</script>
Try this.
export default {
name: 'HelloWorld',
data(){
return {
helloWorld: [{ title: 'Task 01', complete: false }]
}
}
}
Related
I have website for online tests.
One of the question that i have created on the test its topic "Fill in the blank", which means fill in the blank spaces words.
The question comes from the server as a string like that "Today is a [1] day, and i should [2] today".
What i want to do is to get that string and replace all the [] with el-input.
I have done something like that
<template>
<div class="d-flex flex-column mg-t-20 pd-10">
<h6 class="tx-gray-800">Fill in the blank areas the missing words</h6>
<div class="mg-t-20" v-html="generateFillBlankQuestion(question.question)" />
</div>
</template>
<script>
export default {
name: 'FillBlank',
directives: {},
props: [ 'question' ],
components: {
},
computed: {},
data() {
return {
input: ''
}
},
filters: {},
created() {
},
methods: {
generateFillBlankQuestion(question) {
var matches = question.match((/\[\d\]/g))
console.log(matches)
matches.forEach((element) => {
console.log(element)
question = question.replace(element, '<el-input />')
})
console.log(question)
return question
}
}
}
On this line question = question.replace(element, '<el-input />') I'm replacing the [] to input.
For some reason when i try to replace it to <el-input> it doesn't render it.
But if i use <input type='text'> it renders it.
Is it possible to inject el elements?
If you are not using the Vue run-time template compiler you can not render Vue components inside v-html. You should do something like this:
<template>
<div class="d-flex flex-column mg-t-20 pd-10">
<h6 class="tx-gray-800">Fill in the blank areas the missing words</h6>
<div class="mg-t-20">
<template v-for="(word,idx) in wordList">
<el-input v-if="word.blank" v-model="word.value" :key="idx" />
<template v-else>{{ word.text }}</template>
</template>
</div>
</div>
</template>
<script>
export default
{
name: 'FillBlank',
props:
{
question:
{
type: String,
default: ''
}
},
computed:
{
wordList()
{
const words = this.question.split(' ');
return words.map(word =>
({
value: '',
text: word,
blank: /^\[\d+\]$/.test(word),
}));
}
}
}
"nuxt": "^2.4.0"
my error component in layouts directory :
<template>
<div class="__nuxt-error-page">
<div class="error">
{{message}}
</div>
</div>
</template>
<script>
export default {
layout: 'empty',
name: 'error',
props: {
error: {
type: Object,
default: null
}
},
computed: {
statusCode() {
return (this.error && this.error.statusCode) || 500
},
message() {
return this.error.message || `Error`
}
}
}
</script>
and empty layout :
<template>
<nuxt/>
</template>
<script>
export default {
name: "empty",
}
</script>
but when i have error , error component use another layout .. for example, when I'm on the dashboard layout and an error occurs, error component mount on dashboard layout
This question is available on Nuxt community (#c9154)
I'm using Vue CLI 3 and it makes a few routes. One is Home.vue. In my program I am trying to programmaticaly go to different pages. I added the routes I need in router.js but kept the already created routes for Home.vue and About.vue. It works fine until I get to 'Home' and get a warning: [vue-router] Route with name 'Home' does not exist.'
Here is the code:
<template>
<div class='secondItem'>
<h4 v-for="item in menuItems"
#click="bindMe(item)" v-bind:class="{'active':(item === current)}">{{item}}</h4>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
current: '',
menuItems: ['Home', 'About', 'Portfolio', 'Contact'],
}
},
methods: {
bindMe(item) {
this.current = item;
this.$router.push({
path: item
})
}
}
}
<script>
Are you using named routes? In that case you need to use name instead of path:
this.$router.push({
name: item
})
Also, your example can be simplified quite a lot. Try this:
<template>
<div class="secondItem">
<router-link :to="{ name: item }" tag="h4" active-class="active" v-for="item in menuItems" v-bind:key="item">{{item}}</router-link>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
menuItems: ['Home', 'About', 'Portfolio', 'Contact']
}
}
}
<script>
I've got this component, which looks something like this
<template>
<form-wrapper
v-show="show"
:request-action="action"
inline-template
v-cloak
>
<form #submit.prevent="submit()" novalidate>
<html-editor
v-model="fields.body"
id="body"
:contents-css="editorStyles"
></html-editor>
</form>
</form-wrapper>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
required: true
},
action: {
type: String,
required: true
},
editorStyles: {
type: String,
required: true
}
}
}
</script>
As you can see the main component (file of which content you can see) has 2 other components embedded: form-wrapper and html-editor - second one being inside of the form-wrapper, which uses inline-template.
The problem I have is that editorStyles is not accessible from within the form-wrapper inline template.
My question is - how can I make this property available within the inline-template of the form-wrapper component (other than adding it as a property of form-wrapper).
So, this does appear to work. Feels a little icky, but there you have it :)
console.clear()
Vue.component("html-editor", {
props:["contentsCss"],
template:`<div>From Parent: {{contentsCss}}</div>`
})
Vue.component("form-wrapper", {
})
new Vue({
el:"#app",
data:{
editorStyles: "Hello World"
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
<form-wrapper inline-template>
<html-editor :contents-css="$parent.editorStyles"></html-editor>
</form-wrapper>
</div>
I'm using Vue-CLI and getting this error. It's found in the <comment> component.
When the CommentForm's submitComment() method fires and adds the comment object to selfComments to be rendered out, the error occurs. It might be because they reference each other or something, but I'm not sure.
I've attempted to include only relevant information:
Edit: I think it's related to this: https://forum.vuejs.org/t/how-to-have-indirectly-self-nested-components-in-vue-js-2/1931
CommentForm.vue
<template>
...
<ul class="self-comments">
<li is="comment" v-for="comment in selfComments" :data="comment"></li>
</ul>
...
</template>
<script>
import Comment from 'components/Comment'
export default {
name: 'comment-form',
components: {
Comment
},
props: ['topLevel', 'replyTo', 'parentId'],
data() {
return {
text: '',
postingStatus: 'Post',
error: false,
selfComments: []
}
},
methods: {
submitComment() {
...
}
}
}
</script>
<style scoped lang="scss">
...
</style>
Comment.vue
<template>
...
<comment-form v-if="replyFormOpen" :top-level="false" :reply-to="data.username" :parent-id="data.id"></comment-form>
<!-- recursive children... -->
<ul>
<li is="comment" #delete="numComments -= 1" v-for="comment in data.children" :data="comment"></li>
</ul>
...
</template>
** importing CommentForm here seems to cause the issue
<script>
import CommentForm from 'components/CommentForm'
export default {
name: 'comment',
components: {
CommentForm
},
props: ['data'],
data() {
return {
deleteStatus: 'Delete',
deleted: false,
error: false,
replyFormOpen: false
}
},
methods: {
...
}
}
</script>
<style scoped lang="scss">
...
</style>
Any ideas?
I think you're running into this issue: Circular References between Components.
In your CommentForm component, try registering the Comment component during the beforeCreate() event. This will help Vue figure out the correct order in which to resolve the components.
<script>
export default {
name: 'comment-form',
props: ['topLevel', 'replyTo', 'parentId'],
data() {
return {
text: '',
postingStatus: 'Post',
error: false,
selfComments: []
}
},
methods: {
submitComment() {
...
}
},
beforeCreate() {
// register the Comment component here!!!!
this.$options.components.Comment = require('components/Comment.vue');
}
}
</script>