javascript - 默认选择值不显示在 vue 中

Question

大家好，我无法为 v-model="selected_fields[item]" 上的选择下拉菜单选择默认值。我已经接受了文章的挑战，但当我将其设置为“”时，我只能让它在下面的 v-model="selected" 的简单选择下拉列表中工作。对于所有密集用途，该应用程序都会使用我需要保存的映射字段。它只是向我遇到困难的用户显示默认值选择数据字段。

@file_fields = ["Event",
 "First Name",
 "Last Name",
 "Company",
 "Job Title",
 "Ticket",
 "Mobile number",
 "Prefix (Mr., Mrs., etc.)",
 "Industry",
 "Google+ Page",
 "Skype ID",
 "Twitter Handle",
 "Job Function",
 "Work Phone Number",
 "Email Address",
 "Profile Image",
 "Linkedin page",
 "Facebook page",
 "Date of Birth",
 "Street Address",
 "City",
 "State",
 "Zip Code",
 "Country",
 "Company Website",
 "Work Phone"]

@default_selected = Hash[@file_fields.map{ |x,i| [x, ''] }]

<div id="mapping">
  <div v-for="(item, index) in file_fields" class="row mapping-field">
    <div class="col-6">
      <select v-model="selected_fields[item]" class="form-control select">
        <option value="" disabled>Choose Data Field</option>
        <option v-for="(value, key, index) in mapped_fields" v-bind:value="key">{{value}}</option>
      </select>
    </div>
    <div class="col-6">
      <table>
        <% if @header %>
          <thead>
            <tr>
              <th>
                {{item}}
              </th>
            </tr>
          </thead>
        <% end %>
        <tbody>
          <tr v-if="preview_data[0][item]">
            <td>
              {{preview_data[0][item]}}
            </td>
          </tr>
          <tr v-else>
            <td>
              N/A
            </td>
          </tr>
          <tr v-if="preview_data[1][item]">
            <td>
              {{preview_data[1][item]}}
            </td>
          </tr>
          <tr v-else>
            <td>
              N/A
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <br/>
  <button class="btn btn-outline-primary" v-on:click="saveMapping" v-bind:disabled="isSelected">Next</button>
</div>

<script>
  new Vue({
    el: '#mapping',
    data: {
      selected_fields: <%= raw @default_fields.to_json %>,
      mapped_fields: {
        first_name:          'First Name',
        last_name:           'Last Name',
        job_title:           'Job Title',
        email:               'Email',
        company_agency_name: 'Company/Agency Name',
        address_1:           'Address',
        city:                'City',
        state:               'State',
        zip_code:            'Zip Code',
        main_phone:          'Phone',
        website:             'Website'
      },
      preview_data: <%= raw @preview_data.to_json %>,
      file_fields: <%= raw @file_fields.to_json %>
    },
    computed: {
      isSelected: function () {
        return _.isEmpty(this.selected_fields);
      }
    },
    methods: {
      saveMapping: function() {
        this.$http.post('/order/<%= @uuid %>/save_field_mapping', { selected_fields: this.selected_fields }).then(function (response) {
          window.location.href = response.body.next_path;
        }, function (response) {
          console.log('error:', response.body);
        });
      }
    }
  });
</script>

已更新

更新了工作示例的代码。需要将 @file_fields 重新映射到哈希，以便每个键都有值“”。然后分配给 selected_fields。最初它被设置为{}。感谢@daniloisr 的灵感!

Answer 1

您的 selected_fields 属性不包含任何下拉选项，因此默认情况下不会选择任何选项。将您希望默认使用的key传递给v-select。

这是一个example fiddle .