Vue.js component not working

Related searches

I can't seem to figure out how to make components work. Without the component it works fine (the commented code).

Here's my HTML:

<strong>Total Price:</strong> <span v-text="total"></span><br>
<strong>CPC:</strong> <span v-text="cpc"></span>

Here's my Vue.js code:

Vue.component('my-component', {
    // data: function() {
    //     return { interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0 }
    // },
    computed: {
        total: function () {
            return(this.clicks * (this.exposure * 0.001 / 10) / 700).toFixed(8)
        cpc: function () {
            return(( / (this.clicks > 0 ? this.clicks : 1)).toFixed(8)

const app = new Vue({
    el: '#app',
    data: {
        interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0
    // computed: {
    //     total: function () {
    //         return(this.clicks * (this.exposure * 0.001 / 10) / 700).toFixed(8)
    //     },
    //     cpc: function () {
    //         return(( / (this.clicks > 0 ? this.clicks : 1)).toFixed(8)
    //     }
    // }

1) This doesn't work unless I uncomment the commented code.

2) JSFiddle:

You need to include the component in your HTML markup:

<div id="app">

And then the HTML you want displayed as part of this component needs to be in a template, inline or otherwise:

Vue.component('my-component', {
    template: '<div>Your HTML here</div>',
    data: function() {
         return { interval: 0, exposure: 0, clicks: 0, total: 0, cpc: 0 }

VueJS component not rendering, component , followed by new Vue({ el: '#container' }) to target a container element in the body of every page. This can work very well for small to� Note that Vue.js does not enforce the W3C rules for custom tag-names (all-lowercase, must contain a hyphen) though following this convention is considered good practice. Once registered, the component can now be used in a parent instance’s template as a custom element, <my-component> .

You didn't define the template for your component, so Vue doesn't know where and how to render your component.

You can go with inline template strings, mount it to template tag, or go with Single File Components - with webpack or browserify.

First, I suggest you to read docs

How come my vue component is not rendering?, components but my component does not render like it's supposed to. I initially developed the exercise in cloud9 ide when it did not work, so I� Aug 05, 2020 Vue js, javascript, Vue Js component, how to work with Vue js , VueJs component, Vue Js tutorials, What is Vue Js Component , 1107 Views In This Article, we'll learn what is VueJs Component, how to work with VueJs Component, a look at Dynamic Component, and a brief explanation with appropriate examples.

Maybe you want to use single file component if you think it's ugly.

New Vue Component Not Working, I have tried creating new vue component with the same template with the Then, i run npm run dev and use <invite-buttons></invite-buttons> is not working. js from the public folder and i can see that the vue component has� # Child Component Root Elements. With scoped, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes. # Deep Selectors

its a syntax error in object remove comma from last item of object and your code will run normally

Vue component not showing, I am not working on localhost but on server. I would be very glad for any suggestions. My app.js require('./bootstrap'); Vue.component('videoup'� Slots. This page assumes you’ve already read the Components Basics.Read that first if you are new to components. In 2.6.0, we introduced a new unified syntax (the v-slot directive) for named and scoped slots.

Now v-model should work perfectly with this component: < custom-input v-model = "searchText" > </ custom-input > That’s all you need to know about custom component events for now, but once you’ve finished reading this page and feel comfortable with its content, we recommend coming back later to read the full guide on Custom Events .

Note that v-show doesn’t support the <template> element, nor does it work with v-else. v-if vs v-show v-if is “real” conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.

The component’s name is the first argument of Vue.component. The name you give a component may depend on where you intend to use it. When using a component directly in the DOM (as opposed to in a string template or single-file component), we strongly recommend following the W3C rules for custom tag names (all-lowercase, must contain a hyphen

  • Is there any way I can achieve the same thing without having to use templates? It looks so ugly. Thanks!
  • Single-file components: Although, as Belmin mentioned in his answer, you'd then have to use webpack or browserify.
  • I'm already using webpack (with Laravel Elixir) so hopefully it will be easier. Thanks!
  • I don't think that's the problem. I don't want to use a template, I have no use for it, and this works and I'm not using a template: So I just want to implement this into a component.
  • I don't understand what works on this fiddle ? First you don't have template for component, second you don't use this component that you registered anywhere in markup.You just have component and vue instance with same data, and that's why you see data. And you have to use it, otherwise I don't know how you think to make component to work.
  • Please change the values on the dropdowns (exposure and clicks).
  • Your code is working, but there are no component usage here.Your code is working because it's inside Vue instance, so there are no any deal with components. Feel free to remove whole Vue.component code block and your app would still work as expected.
  • As I said you - you have to define template for your component, so then you can use it in markup just like a <my-component></my-component>
  • avoid using comma for last item in object when using shorthands this will cause syntax error thats why as soon you uncomment commented part it works normally because that commented code have no comma at the end