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'")

仅当角色不是经理或协调员时，才会添加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'")

禁用/启用选择取决于值vuejs

1 个答案: