我的 vuex 存储中有一些数据。我将该数据加载到计算属性中，并根据某些条件，向计算属性的数据添加更多数据。然后我想用它来填充表单。该表单将具有所有属性，包括新添加的属性。现在我希望用户能够更改表单中的值并将其提交回商店。但是，由于一切都是从计算属性发生的，因此用户输入的更改不会反射(reflect)出来。寻求帮助...
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Vue Input Computed Example</title>
</head>
<body>
<div id="app" class="container-fluid">
<h2>Vue Input Computed Example</h2>
<!-- I want a form here which is filled with the film data. The idea is that user will update
the data and add data to the newly created properties and then submit form. -->
<input type="text" v-model="item.a"/>
<br /><br />
<input type="text" v-model="item.b"/>
<br /><br />
<input type="text" v-model="item.c"/>
<br /><br />
from computed property 'film': {{film}}
<br /><br />
from data: {{item}}
</div>
<script>
new Vue({
el: '#app',
data: function() {
return {
item: {
a:'',
b:''
}
}
},
computed: {
film () {
var filmdata = {a:'1',b:'2'} // This actually comes from the Vuex store.
// Next based on some condition, I want to add an additional property
// I don't know how to send this to 'item' above. I don't want 'item' to have this additional
// property by default. Add it only if condition satisfies
if (1 == 1) {
filmdata.c = ''
}
return filmdata
}
}
});
</script>
</body>
</html>
最佳答案
设置一个条件来检查您是否要添加额外的属性。
根据该条件提交一个突变，为您的商店状态添加新属性
if(condition){
this.$store.commit('addPropertyToStore', {name: 'b', value:'xyz'});x
}
在您的商店中添加这样的突变
mutationss:{
addPropertyToStore(state, prop){
Vue.set(state, prop.name, prop.value);
}
}
关于javascript - Vuejs 输入绑定(bind)与计算属性中的附加属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47844576/