vue怎么实现添加功能

添加数据到列表

在Vue中实现添加功能通常涉及使用v-model绑定表单输入，通过方法将数据添加到数组。以下是一个基础示例：

<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>
  <div>
    <input 
      v-model="newItem" 
      @keyup.enter="addItem"
      :class="{ 'error': error }"
    >
    <button @click="addItem">添加</button>
    <p v-if="error" class="error-message">输入不能为空</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: '',
      error: false
    }
  },
  methods: {
    addItem() {
      if (!this.newItem.trim()) {
        this.error = true
        return
      }
      this.$emit('add', this.newItem)
      this.newItem = ''
      this.error = false
    }
  }
}
</script>

使用Vuex管理状态

对于大型应用，推荐使用Vuex集中管理状态：

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

组件中使用：

<template>
  <div>
    <input v-model="newItem">
    <button @click="addItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newItem: ''
    }
  },
  methods: {
    addItem() {
      this.$store.dispatch('addItem', this.newItem)
      this.newItem = ''
    }
  }
}
</script>

与服务端交互

实际应用中通常需要与后端API交互：

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

使用计算属性

对于需要处理的数据可以使用计算属性：

computed: {
  filteredItems() {
    return this.items.filter(item => item.isActive)
  }
}

组件通信

父子组件间的通信：

<!-- 父组件 -->
<child-component @add="handleAdd"></child-component>

<script>
methods: {
  handleAdd(newItem) {
    this.items.push(newItem)
  }
}
</script>

<!-- 子组件 -->
<script>
methods: {
  addItem() {
    this.$emit('add', this.newItem)
  }
}
</script>