Vue.js - как правильно перенести html с функцией в component

171

24 июля 2018, 23:30

Всем привет. Есть один код, который работает. По кнопке картинка показывается/прячется.

var pageSettings = new Vue({ 
    el: '#page', 
    data: { 
        showImg: true 
    } 
 });

<div id="page"> 
<button @click="showImg = !showImg">showImg</button> 
<img v-if="showImg" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426"> 
</div>

Код в JSfiddle 1.

Но есть потребность перенесения кнопки в компонент. Однако, при вызове из него, она не работает.

Код в JSfiddle 2.

Не могу понять, как сделать правильно. Прошу подсказать. Спасибо

Answer 1

Все таки, сделал. Все оказалось не так сложно. Однако, рекомендуется делать подобные вещи через $emit

Vue.component('showimgbutton', { 
	template: '<button @click="togglePic">showImg</button>', 
  methods: { 
        togglePic: function() { 
            page.showImg = !page.showImg; 
        }, 
    } 
}); 
 
var page = new Vue({ 
    el: '#page', 
    data: { 
        showImg: true 
    } 
 });

<div id="page"> 
<showimgbutton></showimgbutton> 
<img v-if="showImg" src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426"> 
</div>