vue 实现数据添加

数据添加的基本实现

在Vue中实现数据添加功能，通常涉及表单绑定、事件处理和状态更新。以下是一个典型的实现方式：

<template>
  <div>
    <input v-model="newItem" placeholder="输入新项目">
    <button @click="addItem">添加</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: '',
      items: []
    }
  },
  methods: {
    addItem() {
      if (this.newItem.trim()) {
        this.items.push(this.newItem)
        this.newItem = ''
      }
    }
  }
}
</script>

表单验证

在添加数据前进行验证可以确保数据质量：

<template>
  <form @submit.prevent="addItem">
    <input v-model="newItem" required minlength="3">
    <button type="submit">添加</button>
    <p v-if="error" class="error">{{ error }}</p>
  </form>
</template>

<script>
export default {
  data() {
    return {
      newItem: '',
      error: ''
    }
  },
  methods: {
    addItem() {
      if (!this.newItem) {
        this.error = '内容不能为空'
        return
      }
      if (this.newItem.length < 3) {
        this.error = '至少需要3个字符'
        return
      }
      // 添加逻辑...
      this.error = ''
    }
  }
}
</script>

使用Vuex管理状态

对于大型应用，可以使用Vuex集中管理数据状态：

// store.js
export default new Vuex.Store({
  state: {
    items: []
  },
  mutations: {
    ADD_ITEM(state, item) {
      state.items.push(item)
    }
  },
  actions: {
    addItem({ commit }, item) {
      commit('ADD_ITEM', item)
    }
  }
})

<!-- 组件中使用 -->
<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['addItem']),
    handleAdd() {
      this.addItem(this.newItem)
    }
  }
}
</script>

与后端API交互

实际应用中通常需要将数据保存到后端：

methods: {
  async addItem() {
    try {
      const response = await axios.post('/api/items', {
        item: this.newItem
      })
      this.items.push(response.data)
      this.newItem = ''
    } catch (error) {
      console.error('添加失败:', error)
    }
  }
}

表单组件化

对于复杂表单，可以将其封装为独立组件：

<!-- ItemForm.vue -->
<template>
  <form @submit.prevent="$emit('submit', formData)">
    <input v-model="formData.name">
    <input v-model="formData.price" type="number">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        price: 0
      }
    }
  }
}
</script>

<!-- 父组件中使用 -->
<template>
  <ItemForm @submit="handleSubmit"/>
</template>

<script>
import ItemForm from './ItemForm.vue'

export default {
  components: { ItemForm },
  methods: {
    handleSubmit(formData) {
      // 处理提交逻辑
    }
  }
}
</script>