Vitaly B2020-08-14 07:42:01
Vitaly B, 2020-08-14 07:42:01

2 components with v-if, one method is called, how to pass true/false from this method to v-if?

There are 2 components. In one of them, a method is called from the outside that sets true/false for v-if component templates. How to do? Looking towards $emit and $on or buses? Or is there another solution?
Or is it somehow possible through props?

<div id="app">
<h1>Component Test</h1>
<my-component ref="foo">my-component</my-component>

<button id="ex">External Button</button>

Vue.component('first-comp', {
  template: '<ul><li v-for="thing in things">firstComp: {{ valfirst }}</li></ul>',
  // в этом шаблоне нужен v-if
  data: {


var MyComponent = Vue.extend({
  template: '<div><p>MyComponent</p><ul><li v-for="thing in things">{{ thing }}</li></ul></div>',
  // в этом шаблоне нужен v-if
  data: function() {
    return {
      things: ['first thing'],
  methods: {
  	test: function(clid) {
    if (clid != 'none') {
     console.log('отображать элелменты с v-if ');
    } else {
     console.log('скрывть элелменты с v-if ');
    	this.things.push('another thing ' + clid);

var vue = new Vue({
  el: '#app',
  data: {
  components: {
  'my-component': MyComponent,

document.getElementById("ex").onclick = function () {


Answer the question

In order to leave comments, you need to log in

1 answer(s)
Igor Sukhanov, 2020-08-14

I didn’t really understand what exactly should happen, but here is the solution through props

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question