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

【问题标题】：How to change the attribute value when clicking a button in VueVue中单击按钮时如何更改属性值
【发布时间】：2018-03-09 09:55:37
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： vue.js attributes element-ui

【解决方案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>

【讨论】：

【解决方案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 绑定到 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()方法，我们只是将inputDisabled的值更改为false，而不是使用this.$set()

【讨论】：