VueJS thêm một thuộc tính có điều kiện cho một phần tử

Trong VueJS, chúng ta có thể thêm hoặc xóa một phần tử DOM bằng v-if:

<button v-if="isRequired">Important Button</button>

nhưng có cách nào để thêm / xóa các thuộc tính của một phần tử dom, ví dụ: cho thuộc tính bắt buộc được đặt có điều kiện sau đây không:

Username: <input type="text" name="username" required>

bởi một cái gì đó tương tự như:

Username: <input type="text" name="username" v-if="name.required" required>

Có ý kiến ​​gì không?

Thử:

<input :required="test ? true : false">

Hình thức đơn giản nhất:

<input :required="test">   // if true
<input :required="!test">  // if false
<input :required="!!test"> // test ? true : false

<input :required="condition">

Bạn không cần <input :required="test ? true : false">vì nếu thử nghiệm là trung thực, bạn sẽ nhận được requiredthuộc tính và nếu thử nghiệm là giả mạo, bạn sẽ không nhận được thuộc tính. Một true : falsephần là thừa, nhiều như thế này ...

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

Do đó, cách đơn giản nhất để thực hiện ràng buộc này là <input :required="condition">

Chỉ khi bài kiểm tra (hoặc điều kiện ) có thể bị hiểu sai thì bạn mới cần làm điều gì đó khác; trong trường hợp đó, việc sử dụng Syed !!thực sự là một mẹo nhỏ.
  <input :required="!!condition">

Bạn có thể vượt qua booleanbằng cách ép buộc nó, đặt !!trước biến.

let isRequired = '' || null || undefined
<input :required="!!isRequired"> // it will coerce value to respective boolean 

Nhưng tôi muốn thu hút sự chú ý của bạn đối với trường hợp sau đây khi thành phần nhận đã xác định typecho các đạo cụ. Trong trường hợp đó, nếu isRequiredđã xác định kiểu stringthì việc vượt qua booleankhiến việc kiểm tra kiểu không thành công và bạn sẽ nhận được cảnh báo Vue. Để khắc phục điều đó, bạn có thể muốn tránh vượt qua phần hỗ trợ đó, vì vậy chỉ cần đặt undefineddự phòng và phần hỗ trợ sẽ không được gửi đếncomponent

let isValue = false
<any-component
  :my-prop="isValue ? 'Hey I am when the value exist' : undefined"
/>

Giải trình

Tôi đã gặp vấn đề tương tự và đã thử các giải pháp trên !! Có, tôi không thấy propnhưng điều đó thực sự không đáp ứng những gì được yêu cầu ở đây.

Vấn đề của tôi -

let isValid = false
<any-component
  :my-prop="isValue ? 'Hey I am when the value exist': false"
/>

Trong trường hợp trên, những gì tôi mong đợi không my-propđược chuyển đến thành phần con - <any-conponent/>Tôi không thấy proptrong DOMnhưng Trong <any-component/>thành phần của tôi , một lỗi xuất hiện do lỗi kiểm tra kiểu chống đỡ. Như trong thành phần con, tôi đang mong đợi my-proplà một Stringnhưng nó là boolean.

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

Có nghĩa là thành phần con đó đã nhận được chỗ dựa ngay cả khi nó là false. Tinh chỉnh ở đây là để thành phần con thực hiện default-valuevà cũng bỏ qua việc kiểm tra. Đã vượt qua undefinedcông việc mặc dù!

<any-component
  :my-prop="isValue ? 'Hey I am when the value exist' : undefined"
/>
 

Điều này hoạt động và phần mềm hỗ trợ con của tôi đang có giá trị mặc định.

Sử dụng html

<input :required="condition" />

Và xác định trong thuộc tính dữ liệu như

data () {
   return {
      condition: false
   }
}