I am rendering an <a /> with a directive using vue-markdown.
When my App loads, it seems that my Vue instance is not parsing my rendered tag and thus not calling the appropriate directive.
I'm wondering if there is a prop i need to pass to the vue-markdown instance that will allow the Vue parser to pick up my 'nested' directive.
see example below.
import VueMarkdown from 'vue-markdown'
const Foo = Vue.directive('foo', el => console.log('Element with directive', el));
new Vue({
el: '#app',
components: { VueMarkdown },
directives: {
Foo
}
})
<template>
<div id="app">
<vue-markdown :html="true" source="<a href='/foo' v-foo>I have a directive</a>"></vue-markdown>
// ^output^ <a href="/url" v-foo>I have a directive</a>
// This <a /> is NOT registered as an element with a directive and NOT logged out.
<a href="/anotherURL" v-foo>I also have a directive</a>
// ^This^ IS registered as an alement with a directive and logged out.
</div>
</template>
Related
To simplify the markup of a Vue component, I’m trying to use an object for the props.
When defining the template of the component as described in the code example on Components Basics — Vue.js all works fine. But trying to define the template as an x-template, I’m getting an error saying, that the property 'title' of undefined cannot be read.
Here’s the code:
<div id="app">
<script type="text/x-template" id="post-template">
<div class="blog-post">
<h3>{{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
</script>
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
</div>
const data = {
posts: [
{
title: "Hello World",
content: "Bar"
}
]
};
let postComponent = {
props: ['post'],
template: 'post-template'
}
const vue = new Vue({
el: '#app',
components: {
'blog-post': postComponent
},
data() {
return data;
}
});
Is it not possible to access object properties in a x-template or is there something wrong with my code?
Two things:
Take the x-template outside of your app div. Vue is going to replace all the content in the div, so that template will be lost
postComponent should refer to template with a selector, so #post-template instead of post-template
Here's a demo of it working: https://jsfiddle.net/vzj5g2sn/
I'm currently learning JavaScript, HTML, and Vue.Js, and now how to work with components.
I'm taking an online course which corrects code using a bot.
The assignment is to create a component, greet that produces <div>hello!</div>when it's called using <greet></greet>. To complete the assignment I need to use Vue.Component and the templete-key.
I need to set the el-value at new Vue-caller so it matches <div id="app"></div>
This is in my HTML code so far(with script src included):
<body>
<div id="app">
<greet="greet"></greet>
</div>
</body>
This is my my Vue code so far
new Vue({ el: '#app' })
Vue.component('greet', {
data() {
return {
greet
}
},
template: '<div>hello!</div>'
})
The output on the HTML page is just blank, so I don't understand what I'm missing here.
The output from the bot is:
file.js
✓ exists
✓ is valid JavaScript
1) renders the correct markup
When you use the syntax Vue.component() you are registering a component globally, so it can be used by any new Vue instances created afterward. So:
new Vue({ el: '#app' }) // this Vue instance does not contain the greet component because it does not exists yet.
Vue.component('greet', {
data() {
return {
}
},
template: '<div>hello!</div>'
})
Instead:
Vue.component('greet', {
data() {
return {
}
},
template: '<div>hello!</div>'
})
new Vue({ el: '#app' }) // this Vue instance will contain the greet component because it was already created and registered.
Also <greet="greet"></greet> is not valid syntax. It should be <greet></greet>.
You should remove greet from data() function. it has no meaning and use.
The final code should look like:
<body>
<div id="app">
<greet></greet>
</div>
</body>
Vue.component('greet', {
template: '<div>hello!</div>'
})
new Vue({ el: '#app' })
There are couple of mistakes here.
First <greet="greet"></greet> doesn't work. There's something calles props in vue (you'll learn it in future) Change that line to <greet></greet>
Then you don't have to use data() to show hello div. Delete the greet from data.
Above steps might fix your fault
I am developing a Vue application with Vue-routes. One of the routes has a function, that is meant to change the background colors of two divs by writing the wanted colors in re respective input fields. But there are two problems. The router is not working since I wrote this color changing function and the color change doesn't work either. So it's is basically a "fail-fail" situation. I am receiving this message from the console in Google inspection: "vue.js:597 [Vue warn]: Cannot find element: #container".
I am sure that these problems are intertwined, the question is how do I solve them?
HTML
<div id="container" v-bind:style="bga">
<div class="top" v-bind:style="bgb">
<div id="app">
<h1 id="vueHead">Vue routing</h1>
<h2 class="menu">
<router-link to="/">Color</router-link>
<router-link to="/main">Main</router-link>
</h2>
</div>
</div>
<!-- component matched by the route will render here -->
<router-view></router-view>
</div>
index.js (routes)
import MainPage from '../components/mainPage.js'
import ColorPage from '../components/colorPage.js'
var urlend;
const routes = [
{path: '/', component: ColorPage},
{path: '/main', component: MainPage},
];
const router = new VueRouter({
routes // short for `routes: routes`
});
var vm = new Vue({
el: '#container',
router
});
colorpage.js
const ColorPage = {
template: `
<div id="middle">
<label id="colorLabel"><h2> {{ info }} </h2></label>
</br>
<input type="text" class="colorInput" v-on:input="bga.backgroundColor = $event.target.value" placeholder="here...">
</br>
<input type="text" class="colorInput" v-on:input="bgb.backgroundColor = $event.target.value" placeholder="... and here!">
</div>
`
};
var color = new Vue({
el: '#container',
data: {
info: 'Change Colors By Typing Their Names:',
bga: {
backgroundColor: ''
},
bgb: {
backgroundColor: ''
}
}
});
export default ColorPage
In colorpage.js you have new Vue(). This creates a new Vue instance. What you're likely looking for is creating a new component.
For the component you don't need to define where to mount it with el, but rather Vue router takes care of it. Inside your Vue application you should define el only once and that's where the Vue instance mounts itself. After the Vue instance has mounted itself, routing happens inside Vue.
I am unsure am I doing something wrong but the vuejs component I declared is not working.
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
</div>
<ol>
<!-- Create an instance of the todo-item component -->
<todo-item></todo-item>
</ol>
JavaScript:
var a = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
Vue.component('todo-item',
{
template: '<li>This is a todo</li>'
})
I am using the JsFiddle, message part does display the data but the todo-item didn't show anything.
Your component needs to inside your "#app" div.
<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<ol>
<!-- Create an instance of the todo-item component -->
<todo-item></todo-item>
</ol>
</div>
Here is a working fiddle.
Vue.component has to be called before new Vue in order for the Vue instance to use the component. From the docs (which aren't all that clear on this, admittedly):
These components are globally registered. That means they can be used in the template of any root Vue instance (new Vue) created after registration.
Vue.component('todo-item', {
template: '<li>This is a todo</li>'
})
var a = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
That, and your app's code has to all be inside of the #app div, as pointed out by CUGreen's answer.
I have a Vue.js app. In this app, I have a single file component. In this component, I want to have another component that's specific to the component. I'm trying to do something like this:
parent.vue
<template>
<div>
<child-component></child-component><br />
<child-component></child-component>
</div>
</template>
<script>
export default {
data() {
return {
info: 'hello'
}
},
components: {
childComponent: {
template: '<div>child</div>',
data() { return {}; }
}
}
}
</script>
After building with webpack, I then run my app in the browser. That app then generates an error in the console window that says:
Unknown custom element: - did you register the component correctly?
I believe I've set this up properly. However, clearly I haven't. What am I doing wrong? I can see where I may not have registered "child-component". However, I guess I'm not sure how to do that within a single file component. What am I missing?
Thank you,
Some ideas that might be helpful:
- as thanksd pointed out, register "child-component" intead of childComponent:
components: {
"child-component": {
template: '<div>child</div>',
data() { return {}; }
}
}
make sure you register the component before create the vue instance (this may or may not apply to your case, I cannot tell from the source code you posted:
Vue.component(child-component', {
template: 'child',
data() { return {}; }
})
new Vue({ el: '#app' })