javascript - Vue.js 选择占位符在输入点击时消失

Question

我正在使用 Vue.js 将输入值绑定(bind)到表单，但我在下拉列表中遇到了一个奇怪的问题。当我单击页面上的任何其他输入时，选择的占位符会消失，它们看起来像空字段。如果您单击下拉列表，这些值仍然存在，您可以选择一个项目，但我需要避免占位符消失。

HTML

<div class="review-form hidden" id="submit-form">
            <form action="">
                <div class="row">
                    <div class="col-xs-12">
                        <h6 class="required">How would you rate this product?</h6>
                        <div class="mt-1">
                            <fieldset class="rating" id="rating">
                                <input type="radio" id="star5" name="rating" value="5" v-model="rating" checked/><label class = "full" for="star5"></label>
                                <input type="radio" id="star4" name="rating" value="4" v-model="rating" /><label class = "full" for="star4"></label>
                                <input type="radio" id="star3" name="rating" value="3" v-model="rating" /><label class = "full" for="star3"></label>
                                <input type="radio" id="star2" name="rating" value="2" v-model="rating" /><label class = "full" for="star2"></label>
                                <input type="radio" id="star1" name="rating" value="1" v-model="rating" /><label class = "full" for="star1"></label>
                            </fieldset>
                            <span class="star-label upper"><span class="chosen-rating">((rating)) Star<span v-if="rating > 1">s</span></span></span>
                        </div>
                </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <h6 class="mt-2">Full Name</h6>
                        <input type="text" name="name" placeholder="Your full name (i.e John Smith)" v-model="name">
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-8">
                        <h6 class="required mt-2">Email Address</h6>
                        <input type="text" name="email" placeholder="Your email address" v-model="email">
                    </div>
                    <div class="col-sm-4">
                        <h6 class="mt-2">Twitter</h6>
                        <input type="text" placeholder="@twitter" v-model="twitter">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-sm-12">
                        <h6 class="required mt-2">City</h6>
                        <input type="text" placeholder="Your city" v-model="city">
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <h6 class="mt-2">State</h6>
                        <div class="select">
                            <select class="form-control" id="form-states" v-model="state">
                                <option>Select State</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <h6 class="mt-2">Age</h6>
                        <div class="select">
                            <select class="form-control" id="form-age" v-model="age">
                                <option>Select Age</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <h6 class="mt-2">Title</h6>
                        <input name="title" type="text" placeholder="4 or 5 words about Public Information Services" v-model="title">
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <h6 class="mt-2">Review</h6>
                        <input name="review" type="text" placeholder="How have you enjoyed your Public Information Services experience?" v-model="review">
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-sm-4 col-xs-12">
                        <a  class="btn btn-success mb-1 search-private-btn btn-transformed pull-right">Submit a Review</a>
                </div>
            </div>
        </form>
  </div>

JS

var vm = new Vue({
  el: '#submit-form',
  data: {
      rating: 5,
      name: '',
      email: '',
      twitter: '',
      city: '', 
      state: '',
      age: '',
      title: '',
      review: ''
  },
  delimiters: ["((","))"]
});

$(document).ready(function() {
    var footerList = document.getElementsByClassName('footer-link');
    openInNewTab(footerList);

    ageInput();
    setTimeout(function(){ 
        $('.review-form').removeClass('hidden');
    }, 300);
});

function submitReview(rating, name, email, twitter, city, state, age, title, review) {
    var dto = {
        rating: rating,
        name: name,
        email: email,
        twitter: twitter,
        city: city,
        state: state,
        age: age,
        title: title,
        review: review
    }

    $.post("/api/submitReview", dto, function(res){
        if (res.ok) {
            $('.review-form').addClass('hidden');
            $('.thank-you').removeClass('hidden');
            window.scrollTo(0, 0);
        } else {
            console.log(res);
        }
    });
};

Answer 1

要显示默认选项，它们的值应与data中属性的初始值相同。以防万一，还应该将它们声明为禁用。

因此，您需要做的就是用以下内容替换两个 option 标记:

<option disabled value="">Select State</option>

<option disabled value="">Select Age</option>