javascript - 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")
      }
    },
  }
}

当我首先选择协调员或经理时，我可以在控制台中看到:删除禁用。但是，我想将第二个字段的 :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'")

仅当 Angular 色既不是管理者也不是协调员时，才会添加 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'")