Question

当前，我有：

https://plnkr.co/edit/LdbVJCuy3oojfyOa2MS7

当输入更改时，我希望启用“按我”按钮。

到目前为止，我有检测输入更改时间的代码：

enableButton:function(dino) {
  console.log("input changed", dino);
}

但是在enableButton函数中，不清楚启用相应按钮所需的代码。

我该怎么做？

Answer 1

我修改了您的Page，以便:disabled只是检查当前Input是否不同于之前的Value，但是此解决方案不会更改原始Dino值，如果您希望那样，则请注释一下，然后我进一步修改我的解决方案。

https://plnkr.co/edit/lyEXI8qgeLBykgIVlS29?p=preview

Answer 2

您可以在新属性中跟踪所有恐龙的禁用状态：

data() {
  disabled: {
    Triceratops: true,
    Velociraptor: true,
    Tyrannosaurus: true,
  },
}

然后，将按钮的disabled绑定到该属性：

<button :disabled="disabled[dino]">Press me</button>

在enableButton(dino)中，清除给定disabled的{{1}}状态：

dino

enableButton(dino) {
  this.disabled[dino] = false;
}

new Vue({
  el: '#app',
  data: () => ({
    dinos: [
      "Triceratops", "Velociraptor", "Tyrannosaurus"
    ],
    disabled: {
      Triceratops: true,
      Velociraptor: true,
      Tyrannosaurus: true,
    },
  }),
  methods: {
    enableButton(dino) {
      this.disabled[dino] = false;
    },
    onClick(dino) {
      alert(dino)
    }
  }
});

button:disabled {
  color: gray;
}

在Vue.js中，如何启用v-for循环中的按钮

2 个答案: