【发布时间】：2018-12-30 09:02:36
【问题描述】：
我通过道具将数据传递给我的组件。我使用beforeMount通过数据函数将数据存储在本地状态。然后我需要更新那个本地状态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
}
},
【问题讨论】：
-
如果你将 md-input 更改为正常输入，它是否有效？
-
“不改变数据功能”是什么意思？因为数据函数只调用一次来初始化组件。当您在输入框中键入时，数字是否发生了变化或停留在您的初始值？如果值发生了变化，那么绑定实际上是有效的。你也可以去掉
:value="value"，因为 v-model 已经在幕后处理了。 -
@DatPham 我的意思是当我更改输入值时，数据函数中的本地状态不会改变以反映新值。
-
@Aldarund 我已经在应用程序的其余部分成功地对 md 输入进行了 v 建模。
-
但是在没有 md-input 的情况下它仍然可以工作吗？
标签： javascript vue.js v-model