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 ...
随机推荐
- 使用 Build Pipeline View 插件图表展示Jenkins job依赖关系
使用 Build Pipeline View 查看Jenkins的Job的依赖关系图表 安装 Build Pipeline View 插件下载地址 下载后再jenkins的"插件管理&quo ...
- c#中sealed修饰符
sealed 修饰符表示密封 用法: 1.用于类时,表示该类不能再被继承,不能和abstract同时使用,因为这两个修饰符在含义上互相排斥 2.用于方法和属性时,表示该方法或属性不能再被重写,必须和o ...
- MD5签名
/// <summary> /// 校验签名 /// </summary> /// <param name="mode ...
- C#读入整数
// ClassLibrary1.h #include<iostream> #pragma once using namespace System; namespace ClassLibr ...
- 【12c OCP】最新CUUG OCP-071考试题库（51题）
------------------------------------------------------- 51.(12-10)choose the best answer: Evaluate t ...
- ocp认证052最新题库-收集整理中-1
1..Which two are true about the Archive (ARCn) processes?❑ A) They automatically delete obsolete arc ...
- CF1110G Tree-Tac-Toe（博弈论）
题面 传送门 题解 博弈论的前提是双方都是绝顶聪明的人 所以这种题目显然不是我应该做的 题解 //minamoto #include<bits/stdc++.h> #define R re ...
- rpm 卸载
卸载:python-urlgrabber-3.9.1-9.el6.noarch rpm -e python-urlgrabber-3.9.1-9.el6.noarch
- nginx实现动静分离--附nginx配置文件详解
转自http://www.cnblogs.com/1214804270hacker/p/9299462.html 一.认识访问静态资源与访问动态资源的区别 静态资源:指存储在硬盘内的数据,固定的数据, ...
- URL的三类编码格式（JavaScript实现）
编码函数: 1.escape(): 不编码的字符有69个:* + - . / @ _ 0~9 a~z A~Z 而且escape对0~255以外的Unicode值进行 ...