javascript - Vue.js v-model 到本地状态
问题描述
我通过道具将数据传递给我的组件。我使用beforeMount
通过 data 函数将数据存储在本地状态。然后我需要更新那个本地状态onchange
。
我正在尝试使用 v-model 将数据绑定到本地状态,但是当我更改输入值时,它不会更改数据函数。
我想我错过了一些简单的东西......感谢您的帮助,谢谢!:)
HTML
<div id="labDataWrap" v-if="showLabData">
<h2>Cannabinoid Profile</h2>
<ul>
<li v-for="( value, key ) in cannabanoidProfile" :class="[ key.toLowerCase() ]">
<md-field class="md-focused">
<label> {{ key }} </label>
<md-input v-model="cannabanoidObj[key]" type="number" :name="key" :value="value">{{ value }}</md-input>
</md-field>
</li>
</ul>
<h2>Terpene Profile</h2>
<ul>
<li v-for="( value, key ) in terpeneProfile" :class="[ key.toLowerCase() ]">
<md-field class="md-focused">
<label> {{ key }} </label>
<md-input v-model="terpeneObj[key]" type="number" :name="key" :value="value">{{ value }}</md-input>
</md-field>
</li>
</ul>
<div class="buttonWrap">
<md-button id="saveLabData" @click="saveLabData">Save</md-button>
<md-button id="closeLabData" @click="toggleLabData">Close</md-button>
</div>
</div>
JS
name: "Row",
props: ["other props omitted for post","cannabanoidProfile", "terpeneProfile"],
beforeMount(){
this.cannabanoidObj = this.cannabanoidProfile;
this.terpeneObj = this.terpeneProfile;
},
data: function(){
return {
cannabanoidObj: {},
terpeneObj: {},
isDisabled: true,
showLabData: false
}
},
解决方案
推荐阅读
- sql - 创建具有多个表的动态视图
- html - HTML电子邮件段落格式不起作用
- c# - 如何在正文中发送带有 DB 行的事务性电子邮件
- sql-server - 使用变量运行动态 SQL 时的单引号数量
- python - 使用唯一列值作为键将 Pandas Dataframe 转换为 to_dict()
- r - 如何为组中具有目标值的行设置子集,如果没有,则为同一组中的不同行设置子集?
- hibernate - 我可以在 entityManager.persist 时用其他 ID 覆盖 @SequenceGenerator 值吗
- arrays - 数组函数 VB
- ios - 嵌入式 UITextView 的圆角——什么是(错误地)保持圆角不透明?
- excel - 删除包含没有循环的单词的第 3 行