Я передаю данные моему компоненту, хотя реквизит. Я использую beforeMount
для хранения данных в локальном состоянии через функцию данных. Затем мне нужно обновить это локальное состояние onchange
.
Я пытаюсь использовать v-модель для привязки данных к локальному состоянию, но когда я меняю входное значение, он не меняет функцию данных.
Я думаю, что мне не хватает чего-то простого... Помогите оценить, спасибо! :)
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
}
},
Из документации:
Из-за ограничений современного JavaScript (и отказа от Object.observe), Vue не может обнаружить добавление или удаление свойства.
Чтобы изменить свойство в вашем cannabanoidObj
используйте vm.$set
:value="value"
так как v-модель уже обрабатывает это за сценой.