Hello. There is one code that works. By the button the picture is shown / hidden.

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>

Code in jsfiddle 1.

But there is a need to transfer the button to the component. However, when called from it, it does not work.

Code in jsfiddle 2.

Can't figure out how to do it right. Please prompt. thank

    1 answer 1

    All the same, did. Everything was not so difficult. However, it is recommended to do similar things through $ 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>