vue的事件绑定问题

Question

老师您好，我有个问题，就是实现两个表单联动的时候，比如后一个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 那里错了？刚学前端，万望老师解答，或者提供一些思路，谢谢。

Answer 1

ustbhuangyi 2019-02-18 09:21:05

你应该监听 select 组件的 change 事件吧