Thành phần radio chia sẻ Vuejs không được chọn khi hiển thị

Question

Tôi có thành phần vue mở rộng đầu vào radio gốc với đánh dấu và tạo kiểu bổ sung, mục đích là nó có thể được sử dụng trên toàn bộ ứng dụng làm đài phát thanh cho radio thông thường:

<div class="radios"> 
    <radio-input name="radioInput" value="one" v-model="options.firstOption"> 
    <radio-input name="radioInput" value="two" v-model="options.firstOption"> 
    <radio-input name="radioInput" value="three" v-model="options.firstOption"> 
</div> 

tôi đã làm theo cách tiếp cận đề nghị here (jsfiddle here) nhưng tôi muốn thêm khả năng cho các thành phần để chấp nhận một thuộc tính v-mô hình, mà ví dụ này không làm.

Dưới đây là tập tin thành phần .vue của tôi cho đến nay:

<template> 
    <span class="radio-control"> 
    <input 
     class="input-bool" 
     type="radio" 
     :name="name" 
     :value="value" 
     v-model="radioButtonValue"> 
    </span> 
</template> 

<script> 
    export default { 
    model: { 
     prop: 'checked', 
    }, 
    props: { 
     name: String, 
     value: String, 
     checked: String 
    }, 
    computed: { 
     radioButtonValue: { 
     get: function() { 
      return this.checked; 
     }, 
     set: function() { 
      this.$emit('input', this.value); 
     } 
     } 
    }, 
    }; 
</script> 

Tất cả tốt, hoạt động tốt trên thay đổi, cập nhật mô hình. Vấn đề là thuộc tính được kiểm tra của đài phát thanh không được áp dụng khi thành phần hiển thị, vì vậy nếu ai đó truy cập trang, tất cả các radio sẽ hiển thị trống cho đến khi có sự kiện thay đổi.

Tài liệu của Vue explicitly state rằng "v-model sẽ bỏ qua giá trị ban đầu, thuộc tính đã chọn hoặc được chọn trên bất kỳ phần tử biểu mẫu nào. Dữ liệu này luôn xử lý dữ liệu ví dụ Vue làm nguồn của sự thật". Thêm nó không tạo sự khác biệt, như mong đợi. Nhưng tôi gặp khó khăn khi nhận thuộc tính gốc checked để hiển thị nút radio khi kết xuất.

Answer 1

Không phải vấn đề vue.js nào cả, @bertEvans đã chính xác ở chỗ mã tôi đăng đang hoạt động như mong muốn. Vấn đề là tôi đã có một bộ đầu vào radio riêng biệt trên trang có cùng thuộc tính name="". Mọi người, nếu nhóm radio của bạn không hoạt động như mong đợi, hãy đảm bảo mỗi nhóm có một tên duy nhất!