How to change the attribute value when clicking a button in Vue

Question

I am using Vue Element UI, how can i change the 'disable' attribute of a inputbox from true to false when clicking the 'edit' button?

Answer 1

Added disable property to data, bound it to :disabled and named methods properly:

var Main = {
  data() {
    return {
      input1: 'type something here',
      disable: true,
    }
  },
  methods: {
    editvalue() {
      this.disable = false;
    }

  },
}

var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
  <el-input placeholder="Please input" v-model="input1" :disabled="disable">
  </el-input>
  <el-button size="mini" @click.native="editvalue()">
    Edit</el-button>
</div>