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()函数可以保证父组件和子组件之间的通信。 here the working solution

如何使用VueJS使用按钮在图片周围显示边框？

1 个答案: