vue的事件绑定问题
来源:3-2 axios 封装 & 数据获取

天羽狩
2019-02-17
老师您好,我有个问题,就是实现两个表单联动的时候,比如后一个select选择器的选择内容需要通过前一个select选择器输入的内容来变化,数据库中又不能使用外键去关联,那么在前端怎么实现呢?是类似上图这样绑定一个input事件吗?还是其他的事件?
上面两张图片,就是要第二张图片的选项关联到第一张图片的选择,然后我在第一个选择器中绑定了一个input事件,放入methods中,函数代码如下:
export default {
data() {
return {
ruleForm2: {
value5: [],
value7: []
},
product: [],
project: [],
rules2: {
product: [
{ required: true, message: '请选择产品线', trigger: 'change' }
],
project: [
{ required: true, message: '请选择要发布的项目', trigger: 'change' }
]
}
}
},
这里的product与project是从接口处获取的数据,value5与value7是通过v-model关联的数据,页面上选择的数据会写入到这两个数组中。
mounted () {
checkproductinfo().then((res) => {
this.product = res.data
console.log(this.product)
})
/* checkprojectinfo().then((res) => {
this.project = res.data
}) */
},
methods: {
choseProduct(valuex) {
checkprojectinfo().then((res) => {
for (let i = 0; i < res.data.length; i++) {
if (res.data[i].name === valuex) {
this.project = res.data[i]
}
}
console.log(this.project)
})
},
mounted里面的内容就是初始化时从接口处获取第一个select的选项,methods中定义了绑定在input事件上的函数,通过第一个select选择器获取到的数据来指定project能够获取到接口的部分需要的数据。
老师,请问我这样的思路对吗?我没有找到别的方法,但是methods里面的函数就是不生效,console.log也没有出现我想要的内容。我觉得可能是最开始 @input 那里错了?刚学前端,万望老师解答,或者提供一些思路,谢谢。
写回答
1回答
-
ustbhuangyi
2019-02-18
你应该监听 select 组件的 change 事件吧
00
相似问题