根据值 vuejs 禁用/启用选择

Question

我有 2 个选择字段：

第一个字段：

ns-dropdown-item(item-id="6")    
  ns-select(:placeholder="$t('users.role')", v-model="newLeader.role",
    :options="roleOptions", @change="activeIfCoororMan")

第二个字段被禁用

ns-dropdown-item(item-id="7")    
  ns-select(:placeholder="$t('users.client')", v-model="client", 
    :options="clients", :disabled="true")

这是我的 vue 数据：

export default {
  template: template(),
  data() {
    return {
      newLeader: null,
      client: null,
      clients: [],
      errors: {},
      roleOptions: [
        {value: 'coordinator', label: this.$t('users.roleOptions.coordinator')},
        {value: 'manager', label: this.$t('users.roleOptions.manager')},
        {value: 'leader', label: this.$t('users.roleOptions.leader')},
        {value: 'leader_admin', label: this.$t('users.roleOptions.leader_admin')}
      ]
    };
  },
  methods:  {
    activeIfCoororMan() {
      if(this.newLeader.role === 'manager' || this.newLeader.role === 'coordinator') {
        console.log("remove-disabled")
      } else {
        console.log("stay-disabled")
      }
    },
  }
}

当我首先选择 coordinator 或 ma​​nager 时，我可以在控制台中看到：remove-disable。但是，我想将 :disable 属性从第二个字段更改为 false。

谢谢

Answer 1

您可以使用条件渲染：

ns-dropdown-item(item-id="7")    
  ns-select(:placeholder="$t('users.client')", v-model="client", 
    :options="clients", 
    :disabled="newLeader.role !== 'manager' || newLeader.role !== 'coordinator'")

这将仅在角色既不是经理也不是协调员时添加disabled 属性。

---

但这将是一个安全问题。为什么你只是禁用它们？您根本不应该渲染元素。因此，我建议您使用v-if 语句，以便仅在条件匹配时才呈现它，否则该元素不存在于DOM中。

ns-dropdown-item(item-id="7")    
  ns-select(:placeholder="$t('users.client')", v-model="client", 
    :options="clients", 
    v-if="newLeader.role === 'manager' || newLeader.role === 'coordinator'")