公司项目中遇到一个问题，联动下拉框，并且数据是使用vue-resource从后台获取的，格式不利于输出联动下拉框，联动下拉框是第一个下拉框输出一个数组里每一项json的一个text值，从而第二下拉框输出这个被选中的text的json中的vuale中json的数据并进行下拉选择。当第一个下拉框重置选项的时候，第二个下拉框下拉菜单会动态的改变。

这里使用计算属性来解决了这个问题，

下面是代码

获取后台数据后，在第一个下拉框中渲染dom，然后通过computed计算属性计算出list属性，然后返回给第二个下拉框使用，这样便创建了联动的功能

<body id="app">

    <select v-model="selected" id="text">

        <option v-for="option in options"> {{option.text}} </option>

    </select>

    <br />

    <br />

    <br />

    <select v-model="list">

        <option v-for="v in list">{{v.a}}-{{v.b}} </option>

    </select>

  </body>
new Vue({

    el: '#app',

    data: {

       selected:"A",

         options: Array

    },

    ready: function () {

      let option= [

         { text: 'One', value: [{a:,b:},{a:,b:},{a:,b:}] },

         { text: 'Two', value: [{a:,b:},{a:,b:},{a:,b:}] },

         { text: 'Three', value: [{a:,b:},{a:,b:},{a:,b:}] }

       ];

       this.$set("options",option);

         console.log(this.options);

    },

    computed: {

        list: function () {

            for(var i in this.options){

                // console.log(this.options[i].text)

                if(this.options[i].text == this.selected){

                    console.log(this.options[i].value)

                    return this.options[i].value

                }

            }

        }

    }

  })

注意：使用的为vue1.0

domo测试成功，开始写项目，发现在项目中出现Duplicate value found in v-for="...": "". Use track-by="$index" 错误，查找原因，由于数据是从后台获得，JSON数组中有多个相同的字符串，于是在v-for后面加上track-by="$index"的属性，问题便解决了

vue 获取数据联动下拉框select ，并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误的更多相关文章

  1. vue之v-for遍历下拉框select和单选框组radio-group

    1.v-for遍历下拉框 <el-form-item label="审核状态:" prop="status"> <el-select v-mo ...

  2. Vue.js组件之联动下拉框

    Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  3. 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】

    radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...

  4. jquery+html三级联动下拉框及详情页面加载时的select初始化问题

    html写的三个下拉框,如下: <select name="ddlQYWZYJ" id="ddl_QYWZYJ" class="fieldsel ...

  5. javascript实例学习之一——联动下拉框

    经常碰到这样的需求,如省市_城市_乡镇下拉框.后一个下拉框的内容会根据前一个的改变而改变,之前的解决方法往往是在前一个改变的时候,向后台发送请求临时获取对应的内容.这样每触发一次就会网络请求一次,这种 ...

  6. JQ与AJAX 省市区三级联动下拉框

    用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...

  7. jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）

    1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  8. 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

  9. ajax 多级联动 下拉框 Demo

    写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...

随机推荐

  1. 手动编译安装lamp之php

    转自马哥教育讲课文档 三.编译安装php-5.4.8 1.解决依赖关系: 请配置好yum源(可以是本地系统光盘)后执行如下命令: # yum -y groupinstall "X Softw ...

  2. Lambda 表达式浅谈- 01

    已经有一段时间没有发布博文了... 今天就写一写lambda的一些简单的使用方法 Lambda 在Msdn 上的描述: Lambda 表达式是一种可用于创建委托或表达式目录树类型的匿名函数. 通过使用 ...

  3. （转）Struts2返回JSON数据的具体应用范例

    转载自 yshjava的个人博客主页 <Struts2返回JSON数据的具体应用范例> 早在我刚学Struts2之初的时候,就想写一篇文章来阐述Struts2如何返回JSON数据的原理和具 ...

  4. 修改 Cloud image 的密码的简单方法

    下载工具: yum -y install libguestfs-tools.noarch   打开DEBUG: export LIBGUESTFS_DEBUG=1 LIBGUESTFS_TRACE=1 ...

  5. SQL语句优化 (一) （52）

    优化SQL语句的一般步骤 1 通过show status命令了解各种SQL的执行频率. 格式:mysql> show [session|global]status; 其中:session(默认) ...

  6. 【OCP 12c】最新CUUG OCP-071考试题库（64题）

    64.(22-7) choose the best answer: View the Exhibit and examine the structure of the ORDERS and ORDER ...

  7. 双绞线的制作（常用568B）

    EIA/TIA的布线标准中规定了两种双绞线的线序568A与568B 标准568A: 绿白—1  绿—2  橙白—3  蓝—4  蓝白—5  橙—6  棕白—7  棕--8 标准568B: 橙白—1   ...

  8. [CSS3] 3D桃心

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. Spring 并发事务的探究

    前言 在目前的软件架构中,不仅存在单独的数据库操作(一条SQL以内,还存在逻辑性的一组操作.而互联网软件系统最少不了的就是对共享资源的操作.比如热闹的集市,抢购的人群对同见商品的抢购由一位售货员来处理 ...

  10. 我永远喜欢我的偶像 KIKU