Vue.js中如何将用户输入追加到props数组？解决splice空数组问题

咱们先梳理下你代码里的几个核心问题，这就是为什么你会得到空数组的原因：

1. splice()的返回值不是修改后的数组：splice()方法执行后，返回的是被删除元素组成的数组。你用的splice(1, 0, this.session)是在索引1位置插入元素、删除0个元素，所以返回值是空数组，自然form里的tags就变成空的了。
2. 初始化时this.session是空值：在data初始化form的时候，form.session刚被设为空字符串，这时候把它插入数组根本拿不到用户后续选择的有效session值。
3. 直接修改props不符合Vue规则：Vue中props是单向数据流，父组件传递的props不应该在子组件里直接修改，否则会导致数据混乱，还会触发控制台警告。

接下来给你两种解决方案，你可以根据需求选择：

方案一：提交表单时再合并数组（推荐） #

这种方式是在用户点击注册按钮、准备提交表单时，再把选中的session值合并到tags数组里，避免不必要的实时更新：

修改后的组件脚本 #

<script>
export default {
  props: ['tags'],
  data() {
    return {
      form: new Form({
        session: '',
        // 复制props的tags数组作为初始值，不修改原props
        tags: [...this.tags] 
      })
    }
  },
  methods: {
    handleSubmit() {
      // 复制一份tags数组，避免修改原form.tags的初始值
      const mergedTags = [...this.form.tags];
      // 按照你原来的逻辑，在索引1位置插入选中的session值
      mergedTags.splice(1, 0, this.form.session);
      
      // 这里可以用mergedTags执行提交操作，比如调用接口
      console.log('合并后的数组：', mergedTags);
      // 示例：await this.$axios.post('/register', { ...this.form, tags: mergedTags });
    }
  }
}
</script>

修改后的组件模板 #

给表单添加提交事件，阻止默认跳转行为：

<form @submit.prevent="handleSubmit">
  <b-field label="Select a session">
    <b-select placeholder="Which session?" v-model="form.session" expanded>
      <option value="1" key="1"> Attend 1 </option>
      <option value="2" key="2"> Attend 2 </option>
    </b-select>
  </b-field>
  <button type="submit">Register</button>
</form>

方案二：实时更新数组（用户选择session时立刻合并） #

如果需要用户一选择session，tags数组就同步更新，可以用watch监听session的变化：

<script>
export default {
  props: ['tags'],
  data() {
    return {
      form: new Form({
        session: '',
        tags: [...this.tags]
      })
    }
  },
  watch: {
    // 监听form.session的变化
    'form.session'(newSessionVal) {
      // 先把tags重置为props的原始副本，避免多次选择重复插入
      this.form.tags = [...this.tags];
      if (newSessionVal) {
        // 插入选中的session值
        this.form.tags.splice(1, 0, newSessionVal);
      }
    }
  },
  methods: {
    handleSubmit() {
      // 此时form.tags已经是合并后的数组，直接提交即可
      console.log('提交的数组：', this.form.tags);
      // 提交逻辑...
    }
  }
}
</script>

这样不管是提交时处理还是实时更新，都能正确合并props数组和用户选择的session值，不会再出现空数组的问题啦。

内容的提问来源于stack exchange，提问作者Anton Sirik