trình giữ chỗ để chọn trong vuejs 2.0.0

Question

Tôi đang tạo webapp bằng cách sử dụng vuejs 2.0. Tôi đã tạo ra đơn giản chọn đầu vào sử dụng đoạn mã sau:

<select v-model="age"> 
    <option value="" disabled selected hidden>Select Age</option> 
    <option value="1"> 1 Year</option> 
    <option value="11"> 11 Year</option> 
    </select> 

và tôi có điều này trong data của thành phần Vue của tôi:

data() { 
    return { 
    age: "", 
    } 
}, 
watch: {  
    age: function (newAge) { 
    console.log("log here") 
    } 

Nhưng tôi bắt đầu nhận được lỗi này khi thêm giá trị mặc định cho chọn:

ERROR trong ./~/vue-loader/lib/template-compiler.js?id=data-v-5cf0d7e0!./~/vue-loader/lib/selector.js?type=template & index = 0! ./ src/components/cde.vue lỗi cú pháp mẫu: thuộc tính được chọn nội tuyến sẽ bị bỏ qua khi sử dụng mô hình v. Thay vào đó, hãy khai báo giá trị ban đầu trong tùy chọn dữ liệu của thành phần.

@ ./src/components/cde.vue 10: 23-151

@ ./~/babel-loader!./~/vue-loader/lib/selector.js? type = script & index = 0! ./ src/views/abcView.vue @ ./src/views/abcView.vue

@ ./src/router/index.js

@ ./ src/app.js

@ ./src/client-entry.js

@ đa ứng dụng

tôi đã cố gắng để cung cấp cho giá trị mặc định trong phần dữ liệu của các thành phần là tốt, nhưng sau đó không phải hing đã xảy ra. Tôi đã thử v-bind nhưng sau đó người xem ngừng hoạt động trên biến độ tuổi.

Answer 1

Điều duy nhất cần thiết để làm việc này là loại bỏ selected từ mặc định option:

<select v-model="age"> 
    <option value="" disabled hidden>Select Age</option> 
    ..... 
    </select> 

Answer 2

Đối với người khác có thể được hạ cánh trên câu hỏi này, đã có một bước bổ sung cho tôi để có được những lựa chọn mặc định xuất hiện. Trong trường hợp của tôi, số v-model Tôi đã ràng buộc là trả lại null và thay vì chuỗi rỗng. Điều này có nghĩa rằng các tùy chọn mặc định không bao giờ được chọn một lần Vue bindings đá vào

Để giải quyết cho điều này, đơn giản ràng buộc các value tài sản của tùy chọn mặc định của bạn để null:.

<select v-model="age"> 
    <option :value="null" disabled>Select Age</option> 
    ... 
</select> 

http://jsfiddle.net/2Logme0m/1/