Question

我有：

a List
a Button
a Text-Field

我希望List在每个Text上合并Text-Field中的Button - 点击。

我知道VUE（X）能够做一些魔术。

如何正确连接各个部分？

Answer 1

如果您想使用vuex。使用list: []创建商店然后在按钮单击时，触发将提交变异的操作并将项目添加到列表...

index.vue

<template>
  <div>
   <input type="text" v-model="newItem"/>
   <button @click="addItem(newItem)">add</button>
 </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      newItem: ''
    }
  },
  methods: mapActions(['addItem'])
}
</script>

store.js

list: []

actions.js

addItem: ({commit}, data) => {
  commit('ADD_ITEM', data)
}

mutations.js

[ADD_ITEM] (state, data) {
  state.list.push(data)
}

像这样......

如果您使用mapGetters获取列表项，则在添加新项目后，该列表将立即自动更新。

VUE。 VUEX。将输入字段绑定到输出列表

1 个答案: