vue js如何设置选项值选择答案

【问题标题】：vue js how to set option value selectedvue js如何设置选项值选择
【发布时间】：2015-11-03 05:28:31
【问题描述】：

我在选择选项输入中为我的应用程序使用 vue js..我需要设置默认值应该在下拉列表中选择，并且在更改时我想调用两个函数..

我是 vue js 的新手..

我的代码：

var listingVue = new Vue({

el: '#mountain',

data:{
        formVariables: { 
            country_id: '',
            mountain_id: '',
            peak_id: ''
        },
        countrylist:[],
        mountainlist:[],

},         

ready: function() {

    var datas = this.formVariables;
    this.getCountry();     

},

methods: {

    getCountry: function()
        {

            this.$http.get(baseurl+'/api/v1/device/getCountry',function(response)
            {
                this.$set('countrylist',response.result);      

                //alert(jQuery('#country_id').val());              
            });
        },
    getMountain: function(country_id)
        {
            var datas = this.formVariables;
            datas.$set('country_id', jQuery('#country_id').val() );
            postparemeters = {country_id:datas.country_id};
            this.$http.post(baseurl+'/api/v1/site/getMountain',postparemeters,function(response)
            {
                if(response.result)
                    this.$set('mountainlist',response.result);
                else
                    this.$set('mountainlist','');
            });
        },

});

 <select 
                    class="breadcrumb_mountain_property" 
                    id="country_id" 
                    v-model="formVariables.country_id" 
                    v-on="change:getMountain(formVariables.country_id);">
                <option 
                  v-repeat = "country: countrylist" 
                  value="@{{country.id}}" >
                  @{{country.name}}
                </option>
            </select>

【问题讨论】：

你要选择哪一个？来自v-repeat country?
在Vuejs select doc上查看一些 Vue 选择信息

标签： javascript vue.js

【解决方案1】：

使用 vue 2，提供的答案不会那么好。我遇到了同样的问题，关于<select> 的 vue 文档不是很清楚。我发现<select> 标签正常工作的唯一方法是（在谈到问题时）：

<select v-model="formVariables.country_id">
  <option v-for = "country in countrylist" :value="country.id" >{{country.name}}</option>
</select>

我认为，@{{...}} 中的 @-sign 是由于刀片造成的，不使用刀片时应该没有必要。

【讨论】：

我发现使用这种方法，无法在加载时设置“已选择”选项。我将其修改为使用 v-model="formVariables.country"，其中 country 是完整的对象（例如 {text:'United States',value:'US' }），而不仅仅是 value/id。否则这真的很有帮助 - 上面的文档非常少......谢谢！
文档指出，“选定”状态将被模型覆盖。我可以通过在渲染组件之前设置模型来设置选定的选项。此外，您可以尝试在使用 vm.$forceUpdate() 设置数据后强制您的组件更新（其中 vm 是您的组件，所以可能是 this.$forceUpdate()...）

【解决方案2】：

在 VueJS 2 中，您可以将 selected 绑定到您想要的默认值。例如：

 <select 
   class="breadcrumb_mountain_property" 
   id="country_id" 
   v-model="formVariables.country_id" 
   v-on:change="getMountain(formVariables.country_id);">
   <option 
       v-for = "country in countrylist"
       :selected="country.id == 1"
       :value="country.id" >
       {{country.name}}
   </option>
 </select>

因此，在 countryList 的迭代过程中，将选择 id 为 1 的国家/地区，因为 country.id == 1 将是 true，这意味着 selected="true"。

更新：正如Mikee 建议的那样，除了v-on="change:getMountain(formVariables.country_id);"，还有一种绑定事件的新方法。还有一个简写形式@change="getMountain(formVariables.country_id);"

【讨论】：

这是否意味着所有项目都已被选中，因为如果selected 属性存在，它将被选中，因为该属性不需要值，只要它存在即可。
谢谢，@Mikee 是真的，让我更新答案以展示执行此操作的新方法。

【解决方案3】：

您应该使用 'options' 属性来代替尝试 v-repeat <option></option>：

虚拟机

data: {    
  countryList: [
    { text:'United States',value:'US' },
    { text:'Canada',value:'CA' }
  ]
},

watch: {
  'formVariables.country_id': function() {
    // do any number of things on 'change'
   }
}

HTML

<select 
  class="breadcrumb_mountain_property" 
  id="country_id" 
  v-model="formVariables.country_id" 
  options="countryList">
</select>

【讨论】：

为什么要使用选项而不是v-for？我发现使用 v-for 很有价值，因为它可以让我在遍历对象时分别绑定 :value 和 :label 。

【解决方案4】：

您可以通过这种方式使用 select。记得在 v-for 中使用数组。

  <select v-model="album.primary_artist">
        <option v-for="i in artistList" :key="i.id" :value="i.name">
          {{ i.name }}
        </option>
  </select>

【讨论】：

【解决方案5】：

你可以这样用。

<select v-model="userData.categoryId" class="input mb-3">
      <option disabled value="null">Kategori</option>
      <option
        v-for="category in categoryList"
        :key="category.id"
        :value="category.id"
      >
        {{ category.name }}
      </option>
</select>

export default {
  data() {
    return {
     categoryList: [],
      userData: {
        title: null,       
        categoryId: null,
      },
    };
  },

这里重要的是 categoryId 的值是什么，默认的选项值应该是那个。

categoryId: null,
<option disabled value="null">Kategori</option>

这里我们使用 categoryId 作为 v-model 中的值，并将其初始化为 null。默认选项中的值必须为空。

<select v-model="userData.categoryId" class="input mb-3">

【讨论】：