时间戳

首页 > 解决方案 > Vue.js 2.x 使用按钮更改输入元素中 disabled 属性的值

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

问题描述

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

标签： javascriptvue.jsdata-binding

解决方案

由于禁用状态和它的切换处理程序都在<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"

推荐阅读