公司项目中遇到一个问题，联动下拉框，并且数据是使用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. 基于 Raphael 的 Web UI 设计 - 初稿

    基于 Raphael 的 UI 设计 - 初稿 还有很多地方需要完善,这次要把 Raphael 彻底用起来,^_^, 一定要150字哦,一图抵千字啊,^_^,不喜欢写字的,那么怎么凑够150字呢,说说 ...

  2. yum初识

    yum仓库中的元数据文件: primary.xml.gz 所有RPM包的列表: 依赖关系: 每个RPM安装生成的文件列表: filelists.xml.gz 当前仓库中所有RPM包的所有文件列表: o ...

  3. system.data.oracleclient 需要 8.17 需要oracle客户端问题

    1.下载 2.程序引用   Oracle.DataAccess.dll  其他引用放在debug下

  4. Thread.sleep(1000)

    public class Wait { public static void main(String[] args) { System.out.println(System.currentTimeMi ...

  5. 源码编译安装MySQL-5.6/mysql-5.6.39------踩了无数坑，重装了十几次服务器才会的,不容易啊！

    1.切换到src目录 cd /usr/local/src/ 2. 下载mysql免编译二进制包 免编译的mysql二进制包5.6源码包: wget http://mirrors.163.com/mys ...

  6. 【flask】 学习flask macro 模板

    首先 我是看着这个链接学习的 jinja2 macro官方文档 Flask开发中Macros的实践经验 Flask的Jinja2模板引擎 — 块与宏(6th) 在宏中 还可以赋值...用set标签.. ...

  7. Linux(Ubuntu)配置问题集

    Cannot set LC_CTYPE to default locale: No such file or directory 安装Ubuntu Server版本(不带桌面环境)时,如果安装时的语言 ...

  8. Jmeter中一些概念的理解——90%响应时间、事务、并发

    一.90%响应时间(参考虫师博客) 90%Line  一组数由小到大进行排列,找到他的第90%个数(假如是12),那么这个数组中有90%的数将小于等于12 . 用在性能测试的响应时间,也就是90%请求 ...

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

  10. Centos7 DNS神奇的配置

    文件 [root@iff etc]# cat /etc/named.conf // // named.conf // // Provided by Red Hat bind package to co ...