I have a Vue component which has a custom render method. The method is not getting called however.
<template>
<div class="guide"></div>
</template>
<script>
export default {
name: 'guide',
render: function(createElement){
return createElement('div', 'this will never get called?'),
},
};
</script>
I've looked through the documentation on single file components but it makes no reference to any caveats regarding render(). Is there another way to call this method?
As ABDEL-RHMAN suggested, removing the template will cause the code to work; the <template> causes the render method to be ignored. Working example:
<script>
export default {
name: 'guide',
render: function(createElement){
return createElement('div', 'this will get called?'),
},
};
</script>
Related
I have a component
In the component I have
export default {
name: "Modal",
props: ['showFooter'],
}
Then in the template i have
<template>
<div class='modal'>
<div class='footer' v-if='showFooter'>This is the footer</div>
</div>
</template>
THe footer doesnt display at all, if i pass the prop or not. It just says
[Vue warn]: Property or method "showFooter" is not defined on the instance but referenced during render.
Whats the issue here??
Ive also just tried
<template>
<div class='modal'>
<div class='footer' v-if='showFoot'>This is the footer</div>
</div>
</template>
export default {
name: "Modal",
props: ['showFooter'],
data(){
return {
showFoot:this.showFooter
}
}
}
Then I get told showFoot isnt defined. Which is even wierder because Im defining it right there in the data!??
Even if I just remove the property totally, and just define it in data
export default {
name: "Modal",
data(){
return {
showFoot:true
}
}
}
I still get
[Vue warn]: Property or method "showFoot" is not defined on the instance but referenced during render.
So wierd and I cant for the life of me figure it out
Its almost like the template has no access to anything I define in the data() or props of the componenet. Never seen this before
i think so you are not passing props from parent component. Ideally you can pass it from parent component and receive it in Children.
<childComponent :yourPropNameInChild="anyDataFromParentYouWantToPass" />
here this ChildComponent is rendered in your parent component.
to receive it in children you can do
export default {
name: "Modal",
props: ['yourPropNameInChild'],
}
as of for your example
<modal :showFooter="showFooter" />
in your parent you have to write above line of code
and in your child you have to receive it as you are doing
also in your example you were missing script tag
how do you use a local component's data attriutes to bind an external component's v-model
for example i have this component
<publish-blog>
<VueTrix v-model="form.editorContent">
</publish-blog>
so the form.editorContent there refers to the publish-blog component's form.editorContent inside data, how do I do that ?
You can pass a prop to the publish-blog component.
This would be what ever page or component you are using the publish blog on, though to be honest I'm not sure why you would not just put the VueTrix component inside of the publish-blog component.
This would be on what ever page/component you are wanting it on.
<template>
<PublishBlog :trix="trix">
<VueTrix v-model="trix" />
</PublishBlog>
</template>
<script>
import PublishBlog from './PublishBlog.vue';
export default {
components: {
PublishBlog,
},
data() {
return {
trix: '',
};
},
};
</script>
and inside of the publish blog component make the form.editorContent the prop passed or a default value.
But without a global store/state you are stuck with props.
UPDATE: Showing what a publish blog component might look like
PublishBlog.vue
<template>
<section>
what ever goes here.
<slot />
</section>
</template>
<script>
export default {
name: 'PublishBlog',
props: {
trix: {
type: String,
default: '',
},
},
data() {
return {
form: {
editorContent: this.trix
},
};
},
};
</script>
<template>
<section>
Top
</section>
</template>
<script>
import api from '../../server/api.ts';
export default {
name: 'Questions',
mixins: [api],
data() {
return {
templates : getTemplates(),
};
},
created() {
// **[Vue warn]: Error in created hook: "ReferenceError: getTemplates is not defined"**
this.templates = getTemplates();
},
};
</script>
getTemplates function is working fine if i click on link but getting error in all life hooks of Vue js component.
Thanks for help in advance !
You forgot this for the function. Loading mixins has the same effect as if the content in it would be in your actual component. You need to call the methods the same way as you would call a local function. Always with this.
So change it to:
created() {
this.templates = this.getTemplates();
},
I'm new to Vue.js
I want to render a script tag inside a variable (data string).
I tried to us a v-html directive to do so, but it doesn't work Nothing is rendered
Any way I can achieve this?
I'd place a v-if directive on the script tag and put the content of it in a variable.
<script v-if="script">
{{script}}
</scrip>
If I understand you correctly, my answer is:
<template>
<div>
{{ strWithScriptTag }}
</div>
</template>
<script>
export default {
name: 'Example',
methods: {
htmlDecode(input) {
const e = document.createElement('div')
e.innerHTML = input
return e.childNodes[0].nodeValue
},
},
computed: {
strWithScriptTag() {
const scriptStr = '<script>https://some.domain.namet</script>'
return this.htmlDecode(scriptStr)
}
},
}
</script>
I think that by safety vue is escaping your <script> automatically and there is no way to avoid this.
Anyway, one thing you can do is eval(this.property) on created() lifecycle hook.
data: {
script: 'alert("this alert will be shown when the component is created")'
},
created() {
eval(this.script)
}
Use it with caution, as stated in vue js docs, this may open XSS attacks in your app
I'm trying to call a function inside 'method' from outside. However, it isn't working.
Github issue reporting the same: https://github.com/vuejs/vue/issues/329
vm.test(); // call a function in method, not working
this.vue.test() // not working
export default {
methods: {
test: function() {
alert('test fuction called');
}
}
}
It is not very clear what the actual goal of the original poster is, however this is how you can call a method on a Vue instance, after creating it:
var viewModel = new Vue({
el: "#app",
data: {
msg: "Hello there"
},
methods: {
test: function() {
alert('test fuction called');
}
}
});
viewModel.test();
Working example: https://jsfiddle.net/Daryn/Lja7pake/3/
If you are exporting a single file component then try this:
example.js
<script>
export default {
methods: {
test: function() {
alert('test fuction called');
}
}
}
</script>
main.js
<script>
import Thing from './example.js';
Thing.test();
</script>
Reference: https://v2.vuejs.org/v2/guide/single-file-components.html
What you are trying to achieve is fundamentally flawed. You can't call a method of a component unless you have a reference to an instance of that particular component. In your code, which particular component is vm referring to?
All you're doing is exporting a Vue component definition from your module; there's no component being instantiated here.
We'll need to see more of your code or a complete explanation of what exactly you're trying to achieve so we can provide an alternative solution. (Why are you trying to call the component's method outside of its definition?)
export default {
...
methods: {
...
},
mounted () {
EventBus.$on(‘EVENT_NAME’, function (payLoad) {
...
});
}
}
This is the way I solved that problem.
For the purpose of this demonstration, we create a new project using Vue/CLI. After installation finished, we make the vm exposed to global. Open src/main.js and edit like so:
src/main.js
import Vue from 'vue';
import App from './App.vue';
var vm = new Vue({
router,
render: h => h(App)
}).$mount('#app');
// Add this line (tambahkan baris berikut):
window.vm = vm;
Leave the generated App.vue like it is. So the first child of vm (vm.$children[0]) is App.vue.
We see that App.vue have a child. That makes HelloWorld.vue component as a grand children of vm (vm.$children[0].$children[0]). Knowing this, we can call the methods from outside 'export default' like this:
src/components/HelloWorld.vue
<template>
<div class="hello">
<button
id="sebuahButton"
class="btn btn-outline-secondary btn-sm"
type="button"
>Click Me, Jose!</button>
<h1>{{ msg }}</h1>
<!-- and some stuff, vue cli default generated code -->
<div>
</template>
<script>
(function() {
// wait for the DOM ready event in plain JavaScript
document.addEventListener("DOMContentLoaded", event => {
document.getElementById("sebuahButton").onclick = function() {
vm.$children[0].$children[0].someAction();
};
});
})();
export default {
name: "HelloWorld",
props: {
msg: String
}
methods: {
someAction () {
// do something (lakukan sesuatu masbro!)
console.log("It's been called from outer space, Luke!");
}
}
}
</script>