A Vue component nested within another Vue component

Question

A Vue component nested within another Vue component

Hey there!

Check out this snippet of HTML code:

// index.html
<div data-init="component-one">
  <...>

 <div data-init="component-two">
   <button @click="doSomething($event)">
 </div>
</div>

This part basically involves referencing a Vue instance within another Vue instance. The JavaScript code for this is divided into two files, which are structured like so:

// componentOne.js
new Vue(
  el: '[data-init="component-one"]',
  data: {...},
  methods: {...}
);


// componentTwo.js
new Vue(
  el: '[data-init="component-two"]'
  data: {...}
  methods: {
    doSomething: function(event) {...}
  }
);

The issue I'm encountering here is that the doSomething method from componentTwo isn't being called.

However, when I include some inline content like {{ 3 + 3 }}, it functions as expected. Vue seems to recognize that something exists in that area. Additionally, the @click element disappears upon page load.

I experimented with using inline-template, but it didn't produce the desired outcome in this particular scenario. It seems like it's not suitable for this case, so I abandoned that approach.

What would be the best way to tackle this situation? And how can I ensure everything works smoothly with the current setup?

We're working with Vue version 2.1.8.

Cheers!

javascript vue.js vuejs2

Answer 1

Answer №1

When dealing with nested Vue instances, the issue arises when you have two instances nested within each other. It is recommended to either use the same instance or utilize components if elements are nested.

Check out this JSFiddle for reference

// componentTwo.js
var item = Vue.component('item',({
  name:'item',
    template:'<button @click="doSomething($event)">{{ message2 }</button>',
    data: function(){
      return{ 
        message2: 'ddddddddddd!'
    }},
  methods: {
    doSomething: function(event) {alert('s')}
  }
}));

var app = new Vue({
  el: '[data-init="component-one"]',
  data: {
    message: 'Hello Vue!'
  }
});

<div data-init="component-one">
  <button >{{ message }}</button>
  <item></item>
</div>

If separate instances are needed and they must be independent, here's an example:

View another example on JSFiddle

var app = new Vue({
  el: '[data-init="component-one"]',
  data: {
    message: 'Hello Vue!'
  }
});

// componentTwo.js
var ddd = new Vue({
  el: '[data-init="component-two"]',
    data: {
      message: 'ddddddddddd!'
    },
  methods: {
    doSomething: function(event) {alert('s')}
  } 
});

Answer 2

When dealing with nested Vue instances, the issue arises when you have two instances nested within each other. It is recommended to either use the same instance or utilize components if elements are nested.

Check out this JSFiddle for reference

// componentTwo.js
var item = Vue.component('item',({
  name:'item',
    template:'<button @click="doSomething($event)">{{ message2 }</button>',
    data: function(){
      return{ 
        message2: 'ddddddddddd!'
    }},
  methods: {
    doSomething: function(event) {alert('s')}
  }
}));

var app = new Vue({
  el: '[data-init="component-one"]',
  data: {
    message: 'Hello Vue!'
  }
});

<div data-init="component-one">
  <button >{{ message }}</button>
  <item></item>
</div>

If separate instances are needed and they must be independent, here's an example:

View another example on JSFiddle

var app = new Vue({
  el: '[data-init="component-one"]',
  data: {
    message: 'Hello Vue!'
  }
});

// componentTwo.js
var ddd = new Vue({
  el: '[data-init="component-two"]',
    data: {
      message: 'ddddddddddd!'
    },
  methods: {
    doSomething: function(event) {alert('s')}
  } 
});

Answer 3

Answer №2

However, when I include some inline elements like {{ 3 + 3 }}, Vue successfully calculates them. This indicates that Vue is recognizing the presence of content.

It's because you have a parent instance named 'componentOne' activating Vue for this specific template. If you need to add another instance within it, you'll have to segregate a portion of the template. Here's an example (note: performance may vary in this snippet!). Alternative

https://jsfiddle.net/qh8a8ebg/2/

// componentOne.js
new Vue({
  el: '[data-init="component-one"]',
  data: {
    text: 'first'
  },
  methods: {}
});


// componentTwo.js
new Vue({
  el: '[data-init="component-two"]',
  data: {
    text: 'second'
  },
  template: `<button @click="doSomething($event)">{{text}}</button>`,
  methods: {
    doSomething: function(event) {
      console.log(event);
    }
  }
});

<script src="https://vuejs.org/js/vue.min.js"></script>
<div data-init="component-one">
{{text}}
</div>
 <div data-init="component-two">
 </div>

Answer 4

However, when I include some inline elements like {{ 3 + 3 }}, Vue successfully calculates them. This indicates that Vue is recognizing the presence of content.

It's because you have a parent instance named 'componentOne' activating Vue for this specific template. If you need to add another instance within it, you'll have to segregate a portion of the template. Here's an example (note: performance may vary in this snippet!). Alternative

https://jsfiddle.net/qh8a8ebg/2/

// componentOne.js
new Vue({
  el: '[data-init="component-one"]',
  data: {
    text: 'first'
  },
  methods: {}
});


// componentTwo.js
new Vue({
  el: '[data-init="component-two"]',
  data: {
    text: 'second'
  },
  template: `<button @click="doSomething($event)">{{text}}</button>`,
  methods: {
    doSomething: function(event) {
      console.log(event);
    }
  }
});

<script src="https://vuejs.org/js/vue.min.js"></script>
<div data-init="component-one">
{{text}}
</div>
 <div data-init="component-two">
 </div>

Answer 5

Answer №3

In Vue, the button element inside component-two is referred to as a slot. The @click directive value is evaluated in the parent component (component-one). Therefore, the click handler needs to be declared in component-one.

If you want the handler to be specifically handled within component-two, you must declare a click directive for the slot element in its template and pass the handler function accordingly.

Best of luck with your implementation!

Answer 6

In Vue, the button element inside component-two is referred to as a slot. The @click directive value is evaluated in the parent component (component-one). Therefore, the click handler needs to be declared in component-one.

If you want the handler to be specifically handled within component-two, you must declare a click directive for the slot element in its template and pass the handler function accordingly.

Best of luck with your implementation!

Answer 7

Answer №4

While you are on the right track, one thing to note is that you have embedded the second Vue instance within the first one. By simply placing it alongside instead of nesting it, your code will function as intended.

Vue has a mechanism in place to prevent multiple bindings to the same element in order to prevent endless loops. This is precisely why nesting won't work in this case.

Answer 8

While you are on the right track, one thing to note is that you have embedded the second Vue instance within the first one. By simply placing it alongside instead of nesting it, your code will function as intended.

Vue has a mechanism in place to prevent multiple bindings to the same element in order to prevent endless loops. This is precisely why nesting won't work in this case.

Answer 9

Answer №5

Start by using vue-cli to generate a webpack starter app. Run the command: vue init app --webpack

After that, organize your components in the following manner. For more information, visit: https://v2.vuejs.org/v2/guide/components.html#What-are-Components

Begin with main.js

import Vue from 'vue'
import ComponentOne from './ComponentOne.vue'
import ComponentTwo from './ComponentTwo.vue'

new Vue({
  el: '#app',
  template: '<App/>',
  components: { 
    ComponentOne,
    ComponentTwo
  }
})

Next up is ComponentOne.vue

<template>
  <div class="user">
    <div v-for="user in users">
      <p>Username: {{ user.username }}</p>
    </div>
  </div>
</template>


<script>
export default {
  data () {
    return {
      users: [
        {username: 'Bryan'},
        {username: 'Gwen'},
        {username: 'Gabriel'}
      ]
    }
  }
}
</script>

Last but not least, ComponentTwo.vue

<template>
  <div class="two">
    Hello World
  </div>
</template>


<script>
export default {

}
</script>

Answer 10

Start by using vue-cli to generate a webpack starter app. Run the command: vue init app --webpack

After that, organize your components in the following manner. For more information, visit: https://v2.vuejs.org/v2/guide/components.html#What-are-Components

Begin with main.js

import Vue from 'vue'
import ComponentOne from './ComponentOne.vue'
import ComponentTwo from './ComponentTwo.vue'

new Vue({
  el: '#app',
  template: '<App/>',
  components: { 
    ComponentOne,
    ComponentTwo
  }
})

Next up is ComponentOne.vue

<template>
  <div class="user">
    <div v-for="user in users">
      <p>Username: {{ user.username }}</p>
    </div>
  </div>
</template>


<script>
export default {
  data () {
    return {
      users: [
        {username: 'Bryan'},
        {username: 'Gwen'},
        {username: 'Gabriel'}
      ]
    }
  }
}
</script>

Last but not least, ComponentTwo.vue

<template>
  <div class="two">
    Hello World
  </div>
</template>


<script>
export default {

}
</script>

Answer 11

Answer №6

<div th:if="${msg.replyFloor}">
    <div class="msg-lists-item-left">
        <span class="msg-left-edit"
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">您在</span>
        <span th:text="${msg.topic.title}"
              class="msg-left-edit-res"
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">问题回答</span>
        <span th:text="${msg.type.name}"
              class="msg-left-edit "
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">帖子相关</span>
        <span class="msg-left-edit-number" >
            产生了<span th:text="${msg.unreadCount} ? : ${msg.unreadCount} + '条新' : ${msg.unreadCount} + '条' "
                       th:class="${msg.unreadCount} ? : 'number-inner':''">2132条</span>回复
        </span>
    </div>
    <div class="msg-lists-item-right">
        <span th:text="${msg.lastShowTime}">2017-8-10</span>
    </div>
</div>

Answer 12

<div th:if="${msg.replyFloor}">
    <div class="msg-lists-item-left">
        <span class="msg-left-edit"
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">您在</span>
        <span th:text="${msg.topic.title}"
              class="msg-left-edit-res"
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">问题回答</span>
        <span th:text="${msg.type.name}"
              class="msg-left-edit "
              th:classappend=" ${msg.unreadCount == 0} ? 'msg-all-read' ">帖子相关</span>
        <span class="msg-left-edit-number" >
            产生了<span th:text="${msg.unreadCount} ? : ${msg.unreadCount} + '条新' : ${msg.unreadCount} + '条' "
                       th:class="${msg.unreadCount} ? : 'number-inner':''">2132条</span>回复
        </span>
    </div>
    <div class="msg-lists-item-right">
        <span th:text="${msg.lastShowTime}">2017-8-10</span>
    </div>
</div>

A Vue component nested within another Vue component

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Looking for assistance with implementing CSS on alternating rows within a table via JavaScript

Guide on displaying an enlarged perspective of the area on an ArcGIS Esri Map automatically

Running into issues with permissions on AWS Lambda, unable to create a child process

"Implementing a dynamic way to assign values to different item types in React

Node.js AWS deployment issue: Module not found

"Utilize Angular to categorize and sort JSON data with drop-down filtering

Improving your scene with multiple cubes using Three.js

In a designated paragraph, set the display of all <span> elements to none using JavaScript

Unable to determine the length of an array in Vue.js due to property being undefined

I am looking to amalgamate a pair of scripts into a single cohesive work

Can the console logs be disabled in "Fast Refresh" in NextJS?

Within an Angular test scenario, execute a static method from a service that triggers an HTTP get request to fetch stored JSON data. This data is then retrieved and returned back to the service

Invoking a C++ dll in the renderer process of a Node.js application with Electron using node ffi

What is the best way to implement two separate fonts in a document using the Monaco editor?

Tips for connecting a href to a div id using JQuery for a parallax slider

Encountering unexpected values when utilizing UseContext in React

Difficulty in toggling on and off several form elements with JavaScript

What steps can be taken to resolve the error message: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data?

Create a custom overlay for an image that is centered horizontally and does not have a fixed width

Retrieving all buttons from a webpage and removing those with a specific background-image using JavaScript