Question

我正在使用Vue Element UI，如何在单击“编辑”按钮时将输入框的“禁用”属性从true更改为false？

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>

Answer 1

将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>

Answer 2

在您正在进行的editValue()方法中

this.$set('disable',false)

这只会在disable选项中创建一个名为false的被动属性设置为data。

但是您没有将输入的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

单击Vue中的按钮时如何更改属性值

2 个答案: