当前位置：首页 > VUE

vue实现问卷联动

2026-03-29 05:32:33VUE

Vue 实现问卷联动的方法

使用 v-model 和 computed 属性

在 Vue 中，可以通过 v-model 双向绑定表单元素的值，结合 computed 属性实现联动逻辑。例如，当选择某个选项时，动态显示或隐藏其他问题。

<template>
  <div>
    <select v-model="selectedOption">
      <option value="A">选项A</option>
      <option value="B">选项B</option>
    </select>
    <div v-if="selectedOption === 'A'">
      <input v-model="inputA" placeholder="输入A相关内容" />
    </div>
    <div v-if="selectedOption === 'B'">
      <input v-model="inputB" placeholder="输入B相关内容" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      inputA: '',
      inputB: ''
    };
  }
};
</script>

使用 watch 监听变化

通过 watch 监听某个字段的变化，触发联动逻辑。例如，当选择某个选项时，自动填充或清空其他字段。

vue实现问卷联动

<script>
export default {
  data() {
    return {
      selectedOption: '',
      dependentField: ''
    };
  },
  watch: {
    selectedOption(newVal) {
      if (newVal === 'A') {
        this.dependentField = '默认值A';
      } else {
        this.dependentField = '';
      }
    }
  }
};
</script>

动态表单渲染

对于复杂的联动逻辑，可以使用动态渲染表单组件的方式。根据用户的选择，动态加载不同的表单组件。

vue实现问卷联动

<template>
  <div>
    <select v-model="currentForm">
      <option value="FormA">表单A</option>
      <option value="FormB">表单B</option>
    </select>
    <component :is="currentForm" />
  </div>
</template>

<script>
import FormA from './FormA.vue';
import FormB from './FormB.vue';

export default {
  components: { FormA, FormB },
  data() {
    return {
      currentForm: 'FormA'
    };
  }
};
</script>

使用 Vuex 管理状态

对于大型问卷应用，可以使用 Vuex 集中管理状态，实现跨组件的联动。

// store.js
export default new Vuex.Store({
  state: {
    selectedOption: ''
  },
  mutations: {
    setSelectedOption(state, payload) {
      state.selectedOption = payload;
    }
  }
});

// 组件中
<template>
  <select @change="updateOption">
    <option value="A">选项A</option>
    <option value="B">选项B</option>
  </select>
</template>

<script>
export default {
  methods: {
    updateOption(e) {
      this.$store.commit('setSelectedOption', e.target.value);
    }
  }
};
</script>

使用事件总线

对于简单的跨组件联动，可以使用事件总线（Event Bus）实现组件间的通信。

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 组件A
<script>
import { EventBus } from './event-bus.js';
export default {
  methods: {
    triggerEvent() {
      EventBus.$emit('option-selected', 'A');
    }
  }
};
</script>

// 组件B
<script>
import { EventBus } from './event-bus.js';
export default {
  created() {
    EventBus.$on('option-selected', (option) => {
      console.log(option);
    });
  }
};
</script>