JavaScript: vue 中 select 标签 下拉列表设置默认值JavaScript: vue 中 select 标签 下拉列表设置默认值JavaScript: vue 中 select 标签 下拉列表设置默认值JavaScript: vue 中 select 标签 下拉列表设置默认值
  • 首页
  • 博客
  • 书签
  • 文件
  • 分析
  • 登录

JavaScript: vue 中 select 标签 下拉列表设置默认值

发表 admin at 2022年8月10日
类别
  • Vue
标签

JSON数据

    {
      "code":"0",
      "errmsg":"OK",
      "province_list":[
          {
              "id":110000,
              "name":"北京市"
          },
          {
              "id":120000,
              "name":"天津市"
          },
          {
              "id":130000,
              "name":"河北省"
          },
          ......
      ]
    }

Html

<select v-model="form_address.province_id">
  <option v-for="province in provinces" v-bind:value="province.id">[[ province.name ]]</option>
</select>

Vue

let vm = new Vue(
    {
        el: '#app',
        delimiters: ['[[', ']]'],
        data: {
            form_address: {
                province_id: '',
            },
            provinces: [],
        },
        methods: {
            get_areas: function (area) {
                let url = '';
                axios.get(
                    url, {responseType: 'json'}
                ).then(
                    response => {
                        this.provinces = response.data.province_list;
                        // select下拉框设定默认值
                        this.form_address.province_id=this.provinces[0].id;
                    }
                ).catch(
                    error => {
                        console.log(error.response);
                    }
                )
            },
        },
    }
)

发表回复 取消回复

要发表评论,您必须先登录。

类别

  • Cat
  • Python
  • Django
  • Database
  • Html/CSS
  • JavaScript
  • Vue
  • RegExp
  • Maths/AI
  • PHP/Wordpress
  • Practice
  • Linux
  • Windows
  • Android
  • NAS
  • Software
  • Hardware
  • Network
  • SEO
  • English
  • Games
  • Recipes
  • General
  • Memorandum
  • Essays
  • 未分类

归档

©2015-2023 艾丽卡 Blog support@alaica.com
      ajax-loader