Как я могу отобразить рамку вокруг изображения с помощью кнопки, используя VueJS?

Question

Я пытаюсь отобразить рамку вокруг изображения с помощью кнопки, используя VueJS, эта рамка обычно отображается на моей кнопке. Я понимаю это, но не понимаю, как связать кнопку и изображение, чтобы отобразить рамку вокруг изображения.

ссылка моего кода

Vue.component('my-button', 'my-img' {
  template: `<button :class="classObj" @click="toggleState()">My Button</button>
  <my-img :src="image1" @click="toggleState()" :class="classObj" >`,

  props: {
    state: {
      type: String
    }
  },

  data () {
    return {
      isActive: false, 
    }
  },

  computed: {
    classObj () {
      return {
        [this.state]: this.isActive
      }
    }
  },

  methods: {
    toggleState () {
      this.isActive = this.isActive ? false : true;
    }
  }
});

const App = new Vue({
  el: '#app',
  data: {
     image1 :"http://emersontech.net/wp-content/uploads/2013/05/java.jpg",
  },

});

Answer 1

Я изменил ваш код для достижения желаемого результата, отправив событие из кнопки в родительский компонент, чтобы изменить состояние, поэтому вам не нужно создавать компонент для вашего изображения, и вы можете просто использовать <img .../> тег в родительском шаблоне. Также вы должны знать, что связь между родительским компонентом и дочерним компонентом гарантируется с помощью функций props и this.$emit(). здесь рабочий раствор