Question

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

Answer 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"

传递

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

1 个答案: