В VueJS мы можем добавлять или удалять элемент DOM, используя v-if:


, но есть ли способ добавить / удалить атрибуты элемента dom, например, для следующего условного задания необходимого атрибута:

Username: 

чем-то похожим на:

Username: 

Есть идеи?

Don Smythe

Ответов: 10

Ответы (10)

В html используйте


И определите в свойстве данных, например,

data () {
   return {
      condition: false
   }
}

Вы также можете использовать вычисленное


Computed:

computed: {
   isRequired () {
      return someLogic //Boolean, true or false
   }

Вы можете передать логическое путем принуждения, поместив !! перед переменной.

let isRequired = '' || null || undefined
 // it will coerce value to respective boolean 

Но я хотел бы обратить ваше внимание на следующий случай, когда принимающий компонент определил тип для props. В этом случае, если isRequired определил тип как string, то при передаче boolean проверка типа завершится неудачно, и вы получите предупреждение Vue. Чтобы исправить это, вы можете избежать передачи этой опоры, поэтому просто поставьте undefined резерв, и опора не будет отправлена ​​в компонент

let isValue = false

Пояснение

Я столкнулся с той же проблемой и пробовал решения, указанные выше !! Да, я не вижу prop, но на самом деле это не соответствует тому, что здесь требуется.

Моя проблема -

let isValid = false

В приведенном выше случае я ожидал, что my-prop не будет передано дочернему компоненту - Я не вижу prop in DOM, но в моем компоненте выскакивает ошибка из-за ошибки проверки типа prop. Как и в дочернем компоненте, я ожидаю, что my-prop будет String, но это будет boolean.

myProp : {
 type: String,
 required: false,
 default: ''
}

Это означает, что дочерний компонент получил опору, даже если это false. Настройка здесь состоит в том, чтобы позволить дочернему компоненту принимать значение по умолчанию, а также пропускать проверку. Пройдено undefined хотя работает!


 

Это работает, и моя дочерняя опора имеет значение по умолчанию.

Можно написать примерно так:


Простейшая форма:

   // if true
  // if false
 // test ? true : false

Вы можете добавить двоеточие перед атрибутом (также можете использовать условия), например

Если вы хотите установить динамическое значение, такое как props, вы также можете использовать двоеточие перед именем атрибута, например:


Попробуйте:


Обновление: оно изменилось в Vue 3, см. Этот ответ https://stackoverflow.com/a/64598898

Условный рендеринг атрибутов изменен в Vue 3. Чтобы опустить атрибут, используйте null или undefined.

Vue 2:

Result:
Result:

Vue 3:

Result:
Result:

Вам не нужно , потому что если test is truthy, вы уже получитеобязательный атрибут, и если test равен falsy, вы не получите атрибут. Часть true: false является избыточной, как это ...

if (condition) {
    return true;
} else {
    return false;
}
// or this...
return condition ? true : false;
// can *always* be replaced by...
return (condition); // parentheses generally not needed

Самый простой способ выполнить эту привязку:

Только если тест (или условие) может быть неверно истолкован, вам нужно будет сделать что-то еще; в этом случае Саед использует !!.

Примечательно понимать, что если вы хотите добавить атрибуты условно, вы также можете добавить динамическое объявление:


где attrs объявлен как объект:

data() {
    return {
        attrs: {
            required: true,
            type: "text"
        }
    }
}

В результате получится:


Идеально для случаев с несколькими атрибутами.

2022 WebDevInsider