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 ...
随机推荐
- C# 实现自动化打开和关闭可执行文件（或 关闭停止与系统交互的可执行文件）
string file =Application.StartupPath+@"\WinFrm_Main.exe";//运行程序位置 public Form1() { Initial ...
- 数据库表结构文档查看器 基于netcore
前言 日常开发业务代码,新接手一块不熟悉的业务时需要频繁的查看对应业务的数据库表设计文档.相比于直接翻看业务代码,有必要提供一个数据库表结构文档查看器来解决这些繁琐的问题. CML.SqlDoc CM ...
- 「HNOI 2015」实验比较
\(Description\) 有\(n\)个元素,对于每个元素\(x_i\)最多知道一个形如\(x_j < x_i\)或\(x_j=x_i\)的条件,问有多少合法的序列.合法的序列满足每个元素 ...
- 如何获取token值
登录的时候需要拿到token值,需要跟后端配合才能拿到 官方说明: https://developers.weixin.qq.com/miniprogram/dev/api/api-login.htm ...
- IDEA不能实时更新jsp页面的问题
第一步: 第二步 第三步: 将这三个选项 改成
- NEST - How can i do multiple nested aggregation?
question: How can I do multiple nested aggregation? I have tried something like this: Aggregations(x ...
- mongodb 3.0下载安装、配置及mongodb最新特性、基本命令教程详细介绍
mongoDB简介(本文由www.169it.com搜集整理) MongoDB是一个高性能,开源,无模式的文档型数据库,是目前在IT行业非常流行的一种非关系型数据库(NoSql).它在许多场景下可用于 ...
- dbporxy-mysql 协议流转图
dbproxy 支持 in 查询, 当in 中的字段 属于不同的分表时, QPS约为 5000左右, 如果为 等值查询, qps的30000左右 主要原因是 对于in操作,会产生多个不同分表的sql ...
- HDU-1260-Tickets（线性DP，DP入门）
Tickets Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
- 阿里云服务器18个数据中心测试IP地址以及测试方法
我们用户在选择阿里云服务器的时候是不是感觉阿里云的数据中心太多太多,确实阿里云服务器机房是有很多,国外国外机房大约有18个,甚至更多,因为还在不断的增加机房.对于商家而言增加不同的机房可以满足不同的项 ...