时间戳

首页 > 解决方案 > 使用突变渲染输入表单

vue.js - 使用突变渲染输入表单

问题描述

Vue 2，我正在尝试从输入中呈现文本，并在按下按钮时添加而不是覆盖新数字。不知道如何从这里传入数据。

let mutations = {
changeNumber(state, number) {
state.count = state.count + number 
}
}
    
const store = new Vuex.Store ({
mutations,
state: {
number: ""
}})

Vue.component('some-component', {
template: 
`<div>
<input 
value="Button" 
type="button" 
@click="$store.commit('changeNumber', number)" 
>
<input type="number" v-model="number">
<p>{{ $store.state.number }}
</p>
</div>
` 
})
     
new Vue({
el: '#app',
store
})

标签： vue.js

解决方案

修改你的突变为

changeNumber(state, number) {
state.number += number 
}

还要在 Vue 定义中定义你的数据

new Vue({
el: '#app',
data() {
 return {
  number: 0,
};
},
store
})

模板部分

    Vue.component('some-component', {
    template: 
    `<div>
    <input 
    value="Button" 
    type="button" 
    @click="$store.commit('changeNumber', number)" 
    >
    <input type="number" v-model="number">
    <p>{{ number }}
    </p>
    </div>` 
})

推荐阅读