Question

如何从Select if value object中选择第一个元素？我有阵列两个级别。我需要一个对象以传递两个参数（名称，值）

<select  v-model="getSelectLanguage" class="uk-select">
   <option :value="sel" v-for="(sel,index) in serviclevel.selectlanguage" >
                                {{sel.label}} 
   </option>
</select>

示例数据

Services_level_2: [{
    head_option: "Lorem Ipsum is simply dummy text of the printing and typesetting ",    
    selectlanguage: [{
        label: "1",
        price: 1
      },
      {
        label: "2",
        price: 1.5
      },
      {
        label: "3",
        price: 2.3
      },
      {
        label: "4",
        price: 3.2
      },
      {
        label: "5+",
        price: 4
      }
    ]

  }]

示例demo

Answer 1

如果希望始终选择第一项，则可以将:selected="index === 0"添加到option元素。

jsfiddle

修改

https://vuejs.org/v2/guide/forms.html#Basic-Usage

v-model将忽略在任何表单元素上找到的初始值，已检查或选定的属性。它将始终将Vue实例数据视为事实的来源。您应该在JavaScript端的组件的data选项中声明初始值。

...

如果v模型表达式的初始值与任何选项都不匹配，则该元素将呈“未选中”状态。在iOS上，这将导致用户无法选择第一项，因为在这种情况下，iOS不会触发更改事件。因此，建议如上例所示，为禁用选项提供一个空值。

简而言之，如果selected与某个选项不匹配，它将显示未选中状态。

updated fiddle

Answer 2

您可以将selected初始化为所需的默认选项。

const options = [
   {
      text: 'One',
      value: 'A'
   },
   {
      text: 'Two',
      value: 'B'
   }, 
   {
      text: 'Three',
      value: 'C'
   }
];


new Vue({
  el: '#my-inputs',
  data: {
    selected: options[0],
    options: options
  },
})

Vue.js如果值对象始终选择第一个值

2 个答案: