@vitaliy_balahnin
Новичок в веб-разработке

2 компонента с v-if, в одном вызывается метод, как из этого метода передавать в v-if true/false?

Есть 2 компонента. В одном из них извне вызывается метод, который устанавливает true/false для v-if шаблонов компонентов. Как сделать? Смотреть в сторону $emit и $on или шины? Или есть другое решение?
Или как-то через props можно?
spoiler
<div id="app">
<h1>Component Test</h1>
<my-component ref="foo">my-component</my-component>
<first-comp>first-comp</first-comp>
</div>

<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 () {
	vue.$refs.foo.test('val');
};


https://jsfiddle.net/vitos8686/s8f3navb/43/
  • Вопрос задан
  • 159 просмотров
Решения вопроса 1
craxmzfk
@craxmzfk
Frontend разработчик
Не очень понял что именно должно получиться, но вот решение через props
https://jsfiddle.net/rbg7L9z3/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы