Question

大家好我无法为v-model="selected_fields[item]"上的选择下拉列表选择默认值。我已经完成了文章的挑战，但是当我将它设置为＆＃34;＆＃34;我只能在v-model="selected"下面的简单选择下拉列表中使用它。。对于所有密集目的，应用程序使用我需要保存的映射字段。它只是向用户显示了一个默认值Choose Data Field，而我却被卡住了。

@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重新映射为哈希值，这样每个键的值都为＆＃34;＆＃34;。然后分配给selected_fields。最初设置为{}。感谢@daniloisr的灵感！

Answer 1

您的selected_fields媒体资源不包含任何下拉选项，因此默认情况下不会选择任何一个。默认情况下，将您要使用的key传递给v-select。

这里是example fiddle。

Answer 2

这就是我喜欢的方式：

//html

<select :value="selectedProjectManager" @input="(val)=>{this.handleNameChange(val.target.value)}">
        <option disabled selected value="">Choose Name</option>
        <option :key="pm.UserId" v-for="pm in projectManagers" :value="pm.UserId">{{pm.FirstName}}</option>
</select>


//JS

data () {
      return {
        selectedProjectManager: null,
        projectManagers: [someListOfManagers]
      }
    },
methods: { 
  handleNameChange (val) {
    this.selectedProjectManager = val
  }
},

默认选择值不在vue中显示

2 个答案: