Vue.js v-model 到本地状态

Question

我正在通过 props 将数据传递到我的组件。我使用 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
        }
    },

Answer 1

来自 documentation：

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion.

要在 cannabanoidObj 中更改属性，请使用 vm.$set

Vue.js v-model 到本地状态

Vue.js v-model to local state

javascript

vue.js

v-model