Vue点击按钮时改变属性值的方法

Question

我正在使用 Vue Element UI，如何在单击 'edit' 按钮时将输入框的 'disable' 属性从 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)

这只会在您的 data 选项中创建一个名为 disable 的响应式属性设置为 false。

但是您没有将输入的 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 绑定到禁用的属性，如下所示

<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点击按钮时改变属性值的方法

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

vue.js

attributes

element-ui