vue 获取数据联动下拉框select ，并解决报Duplicate value found in v-for="...": "". Use track-by="$index" 错误
公司项目中遇到一个问题，联动下拉框，并且数据是使用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" 错误的更多相关文章
- vue之v-for遍历下拉框select和单选框组radio-group
1.v-for遍历下拉框 <el-form-item label="审核状态:" prop="status"> <el-select v-mo ...
- Vue.js组件之联动下拉框
Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】
radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...
- jquery+html三级联动下拉框及详情页面加载时的select初始化问题
html写的三个下拉框,如下: <select name="ddlQYWZYJ" id="ddl_QYWZYJ" class="fieldsel ...
- javascript实例学习之一——联动下拉框
经常碰到这样的需求,如省市_城市_乡镇下拉框.后一个下拉框的内容会根据前一个的改变而改变,之前的解决方法往往是在前一个改变的时候,向后台发送请求临时获取对应的内容.这样每触发一次就会网络请求一次,这种 ...
- JQ与AJAX 省市区三级联动下拉框
用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...
- jQuery实现的3个基础案例（仿QQ列表分组，二级联动下拉框，模拟员工信息管理系统）
1.仿QQ列表分组 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...
- 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框
JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP mysql数据库 SpringMvc ajax Controller层 Service层 中国地区 省 ...
- ajax 多级联动 下拉框 Demo
写了ajax实现级联下拉框,考虑常用,并且级联个数随不同业务个数不同,于是就整理了一下,实现了 ajax + N级联动 下拉框的效果 效果图 HTML 代码 <h2> 省级联动</h ...
随机推荐
- eclipse-->run as --> maven test 中文乱码
其有一个配置参数forkMode,默认为once,即表示每次运行test时,新建一个JVM进程运行所有test. 这可能会导致乱码问题.首先将forkMode设置为never,即不新建.再运行mvn ...
- 使用dockerfile文件创建镜像时docker build没有反应
问题: 先 docker pull centos:7 拉取了一个官方的基础镜像,为后续创建jdk8镜像做准备,在创建如下的dockerfile文件 执行docker build -t jdk_8u19 ...
- 深入理解js立即执行函数
看过jQuery源码的人应该知道,jQuery开篇用的就是立即执行函数.立即执行函数常用于第三方库,好处在于隔离作用域,任何一个第三方库都会存在大量的变量和函数,为了避免变量污染(命名冲突),开发者们 ...
- SparkSQL大数据实战：揭开Join的神秘面纱
本文来自 网易云社区 . Join操作是数据库和大数据计算中的高级特性,大多数场景都需要进行复杂的Join操作,本文从原理层面介绍了SparkSQL支持的常见Join算法及其适用场景. Join背景介 ...
- vsftp -samba-autofs
摘要: 1.FTP文件传输协议,PAM可插拔认证模块,TFTP简单文件传输协议. 注意:iptables防火墙管理工具默认禁止了FTP传输协议的端口号 2.vsftpd服务程序三种认证模式?三种认证模 ...
- 【Oracle 12c】最新CUUG OCP-071考试题库（54题）
54.(12-15) choose the best answer: View the Exhibit and examine the structure of the ORDER_ITEMS and ...
- 【OCP|052】OCP最新题库解析系列-3
3.Which structure can span multiple data files?❑ A) a permanent tablespace❑ B) a bigfile tablespace❑ ...
- 个人常用的win7 快捷键
1.Win + D – 显示桌面 2.Win+L 锁定系统 3.Win + R – 打开运行窗口 4.Win+M 最小化所有窗口 当按下后当前所有窗口全都最小化.再次按下这个组 ...
- “全栈2019”Java多线程第十五章：当后台线程遇到finally
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...
- centos绑定https
1.百度云申请免费ssl证书 一年一申请 2. https://www.wosign .com /faq/faq-apache-https.htm 3.注意ssl.conf里面各个证书的顺序 证书路径 ...