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 ...
随机推荐
- Newtonsoft.Json Deserialize Type 或者 同类型 变量 反序列化
Newtonsoft.Json 经常再用 这样的需求 还是很少用 场景 方法一:根据 Type 反序列化 ; string jsongString = JsonConvert.SerializeObj ...
- ASP.NET基于NPOI导出数据
using System; using System.Collections; using System.Collections.Generic; using System.IO; using Sys ...
- Problem G: 沉迷字符的WJJ (LCS)
Contest - 河南省多校连萌(四) Problem G: 沉迷字符的WJJ Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 6 Solved: 5 ...
- 在myeclipse中有的项目上有个红色感叹号
之前做项目的时候遇到过这个问题,最后确定原因是项目引用了很多放在D盘或E盘上的jar包,但是我们不小心把这些jar包删除或移动路径了,因此myeclipse识别不了出现红色的感叹号,解决方式是在mye ...
- 【招聘】滴滴滴~ i春秋内推直通车来咯，帮你找工作！
凑是这么简单粗暴,i春秋冬日特享福利!虽然金九银十已经过去,但素想换工作想找工作的小哥哥小姐姐看过来! [职位方向]渗 透 测 试.代 码 审 计.安全开发.病毒分析.风险控制.安全运维.....任何 ...
- [ActionScript3.0] 使用FileReference处理单个文件的上载
package { import flash.display.SimpleButton; import flash.display.Sprite; import flash.errors.Illega ...
- 【Map,HashMap,Vector,List】资料汇总
深入学习HashMap实现原理 http://www.cnblogs.com/xwdreamer/archive/2012/06/03/2532832.html 深入学习Vector原理 http:/ ...
- Oracle数据库PL/SQL那点事情---修改过电脑的用户名
在安装Oracle数据库的PL/SQL工具时候,电脑名称是重装系统后自动生成的用户名名称,作为程序员,有很强的强迫症,就想利用自己的英文名称作为自己电脑的名称,所以就修改了电脑的名称:结果PL/SQL ...
- eclipse远程debug服务器上的项目（Tomcat），打开、关闭及常见错误汇总
我们工作中,有时候测试/生产环境,出现的结果会与我们预计的不一样,只看代码又看不出去问题所在,这个时候就需要远程debug下服务器上的项目. 注意:(1)需要debug的代码,本机代码需与服务器上一致 ...
- Github如何在本地创建一个空的仓库
1.在任意地方创建文件夹,并进入该文件夹: 2.通过git init命令把该文件夹变成Git可管理的仓库: 3.该文件夹里会多了个.git文件夹,它是Git用来跟踪和管理版本库的: 4.这时候手动把项 ...