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 事件吧
//img.mukewang.com/szimg/5c6a087e0001240523581074.jpg

0
0

Vue.js2.5+cube-ui重构饿了么App(经典再升级)

掌握Vue1.0到2.0再到2.5最全版本应用与迭代,打造极致流畅的WebApp

9868 学习 · 4162 问题

查看课程