Transmitting information to the main Vue class component

Question

Transmitting information to the main Vue class component

I'm facing an issue with a Vue component that I've defined using Vue class components. Here is the code snippet:

@Component
export default class MyComponent extends Vue {
  value = 0;
}

My requirement is to create multiple instances of this component as root components, each with different data passed in. I attempted to achieve this by doing the following:

const vm = new Vue({
  el: myElement,
  render: (h) => h(MyComponent),
  data: {value: 1},
});

However, upon inspection, I noticed that the value of this.value in the component remains set to 0 instead of 1. Is there a way for me to ensure that the component is instantiated with the value passed when invoking new Vue?

typescript vue.js vuejs2 vue-component vue-class-components

Answer 1

Answer №1

Your approach is not working because the root component renders MyComponent as a child component, causing a separation in data between the two components. There is no ability to override the data this way.

If you are unfamiliar with Vue class components, here is a simpler solution. Since the MyComponent class extends Vue, you can instantiate MyComponent directly as the root component. Any additional options provided during instantiation will be merged into the base options.

All you need to do is:

const vm = new MyComponent({
  el: myElement,
  data: { value: 1 },
})

No need to define the render function again since it is already included in MyComponent.

Here is a code snippet demonstrating this concept:

const MyComponent = Vue.extend({
  template: '<div>{{ value }}</div>',
  data() {
    return {
      value: 'base'
    }
  }
})

new MyComponent({
  el: '#app',
  data: {
    value: 'extended'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Answer 2

Your approach is not working because the root component renders MyComponent as a child component, causing a separation in data between the two components. There is no ability to override the data this way.

If you are unfamiliar with Vue class components, here is a simpler solution. Since the MyComponent class extends Vue, you can instantiate MyComponent directly as the root component. Any additional options provided during instantiation will be merged into the base options.

All you need to do is:

const vm = new MyComponent({
  el: myElement,
  data: { value: 1 },
})

No need to define the render function again since it is already included in MyComponent.

Here is a code snippet demonstrating this concept:

const MyComponent = Vue.extend({
  template: '<div>{{ value }}</div>',
  data() {
    return {
      value: 'base'
    }
  }
})

new MyComponent({
  el: '#app',
  data: {
    value: 'extended'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Transmitting information to the main Vue class component

Answer №1

Similar questions

What is the best way to combine a functional component with an HTML string when rendering a node?

typescript add some flair to the setter function

Unable to move draggable table rows in vue.js

Steps for clicking on the center of a leaflet map with protractor

Even when there is a change in value within the beforeEach hook, the original value remains unchanged and is used for dynamic tests

Preventing the "Unknown custom element" error in VuePress by excluding custom elements

What could be causing the Twitter Timeline to fail to load based on a variable in a Vue.js component?

Is the concept of client-side authentication, similar to that on single-page applications, simply a facade to deter users who trust in it from tampering with the data on the server side?

How can I conditionally disable a button in Vue.js using an if statement?

What is the reason for the array length view not updating when a new object is added?

What is the best method to locate an element<T> within an Array[T] when <T> is an enum?

Arranging the output of a Typescript project

What is the solution for resolving the no-unsafe-any rule?

Enhancing Security and Privacy of User Information with JWT Tokens and NgRx Integration in Angular Application

Animating the navigation toggle in a Nuxt application

Why is it that TypeScript does not issue any complaints concerning specific variables which are undefined?

Tips for eliminating webpack:// from appearing in browser sources

Tips for enabling the "Open in editor" feature in VueDevtools

Position the text alongside the thumbnail rather than in the center

Securing important code sections in Node/Express using Typescript: A guide