Vue.js 2.x 使用按钮更改输入元素中 disabled 属性的值答案

【问题标题】：Vue.js 2.x Change the value of the disabled attribute in the input element using the buttonVue.js 2.x 使用按钮更改输入元素中 disabled 属性的值
【发布时间】：2018-10-26 14:32:31
【问题描述】：

我有很多由循环生成的行。每一行都有自己的“输入”，带有描述和操作按钮。其中一个按钮是负责更改“禁用”属性值的编辑按钮。我不知道我应该怎么做。好的，我知道我应该使用 $emit。

<template>
  <section id="tasks-list">
    <ul>
      <task
        v-for="(item, index) in filteredTasksList"
        v-bind:key="item.id"
        v-bind:index="index"
        v-bind:item="item"
        v-bind:tasks="tasks"
      />
    </ul>    
  </section>
</template>

和任务组件：

<template>
    <li :class="{checked: item.status}" class="task">
      <div class="task-description">
        <span>{{item.description}}</span>
        <input type="text" v-model="item.description" :disabled="true">
      </div>
      <div class="task-actions">
        <button class="btn-edit" v-on:click="disableItem()">{{translation.edit}}</button>
      </div>
    </li>
</template>

<script>
  export default {
    name: 'task',
    props: {
      item: { required: true },
      index: { reuqired: true },
      tasks: { required: true },
      search: { require: true }
    },
    methods: {
      disableItem(event){
        //part responsible for changing disabled attr
      }
    }
  }
</script>

【问题讨论】：

标签： javascript vue.js data-binding

【解决方案1】：

由于禁用状态和它的切换处理程序都在<task> 组件内，您可以将逻辑保留在该组件内。不需要$emit 一个事件到父组件，除非你想从父组件管理状态。

在<task> 组件内部，它可以通过使用布尔变量并通过disableItem 处理程序更改按钮单击时的值来实现。

输入元素应改为：

<input type="text" v-model="item.description" :disabled="isDisabled">

添加我们应该在组件的数据中创建一个变量并更新disableItem方法如下：

data () {
  return {
    isDisabled: false
  }
},
disableItem () {
  this.isDisabled = true
}

另外，不需要在点击处理程序中执行disableItem方法，它可以作为引用传递v-on:click="disableItem"

【讨论】：