1

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? 

var Main = {
  data() {
    return {
      input1: 'type something here',
    }
  },
  method: {
    editvalue() {
    this.$set('disable',false)
    }

  },
}

var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@1.3.5/lib/theme-default/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.3.5/lib/index.js"></script>
<div id="app">
  <el-input placeholder="Please input" v-model="input1" :disabled="true">
  </el-input>
  <el-button size="mini" @click.native="editvalue()">
    Edit</el-button>
</div>

4

2 回答 2

4

将属性添加disable到data，将其绑定到:disabled并正确命名methods：

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/element-ui@1.3.5/lib/theme-default/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.3.5/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>

于 2018-03-09T10:09:17.933 回答
2

在你的editValue()方法中，你正在做

this.$set('disable',false)

这只是在您的选项中创建一个名为disableset to的反应属性。falsedata

但是您没有disabled将输入的属性绑定到任何反应数据

只需初始化一个inputDisabled在您的数据选项中命名的属性，将其设置为true

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

  },
}

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

将其绑定inputDisabled到 disabled 属性，如下所示

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

查看editValue()方法，而不是使用this.$set()我们只是将值更改inputDisabled为false

于 2018-03-09T10:11:19.223 回答