vue双向绑定问题

Question

“188万元宝”按钮点击以后，下面“商品名称”显示“188万元宝”，然后修改“188万元宝”，上面的“188万元宝”按钮里的文字也要跟着变，数据是后端传给我的。

现在修改 “商品名称”里的“188万元宝”，按钮不会跟着变。求解。。。

按钮是后端数据循环出来的

<form class="form-horizontal">
                            <div class="box-header with-border">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">应用渠道</label>
                                    <div class="col-sm-10">
                                        <multiselect v-model="commodityManagement.commodityChooseData.onSelectChannel"
                                                     :options="commodityManagement.commodityChooseData.channel"
                                                     :multiple="true"
                                                     :close-on-select="false"
                                                     :clear-on-select="false"
                                                     :hide-selected="true"
                                                     :preserve-search="true"
                                                     :custom-label="commodityChooseDataNameWithLang"
                                                     placeholder="请选择渠道"
                                                     label="name"
                                                     track-by="name"
                                                     deselect-label="点击取消"
                                                     select-label="点击选中"
                                                     selected-label="已选中"
                                                     @select="commodityChooseDataOnSelect"></multiselect>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">所有商品</label>
                                    <div class="col-sm-10">
                                        <ul class="plugInEditList">
                                            <li v-for="(key,index) in commodityManagement.commodityChooseData.data">
                                                <span @click="commodityDetail(index,key.id)">{{key.name}}</span><i @click="commodityDel(index,key.id)">&times;</i>
                                            </li>
                                        </ul>
                                        <button type="button" class="btn btn-success" @click="commodityManagementAdd">
                                            <i class="fa fa-plus" aria-hidden="true"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-body">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品ID</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" v-model="commodityManagement.currentNode.commodityId">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品名称</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" v-model="commodityManagement.currentNode.name">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品价格</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" v-model="commodityManagement.currentNode.money">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">类型</label>
                                    <div class="col-sm-10">
                                        <multiselect v-model="commodityManagement.currentNode.type"
                                                     placeholder="请选择类型"
                                                     label="name"
                                                     track-by="name"
                                                     :options="commodityManagement.type"
                                                     :custom-label="customLabel"
                                                     :show-labels="false">
                                            <template slot="option" scope="props">
                                                <img class="option__image"
                                                     :src="props.option.img">
                                                <div class="option__desc">
                                                    <span class="option__title">{{ props.option.name }}</span>
                                                </div>
                                            </template>
                                        </multiselect>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">商品数量</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" v-model="commodityManagement.currentNode.num">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">道具ID</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" v-model="commodityManagement.currentNode.djId">
                                    </div>
                                </div>
                            </div>
                            <div class="box-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary pull-right" data-dismiss="modal" @click="commodityManagementEdit">保存</button>
                            </div>
                        </form>

Answer 1

上面标签绑定的数据是chooseData中的数据，
下面文本框绑定的是currentNode的中的数据，
绑定的不是同一数据，所以不能同时更新，

可以通过watch监听cuuentNode中的数据变化，改变chooseData的数据，
贴个示例代码：

watch:{
    commodityManagement: {
        handler: function(val,oldval){
            this.commodityManagement.commodityChooseData.name = val.currentNode.name;
            //这里还可以继续改变其它的值
        },
        deep:true
    }
}

建议的代码是将currentNode从commodityManagement中抽离出来，这样watch的时候可以单独监听currentNode，不然像上面监听commodityManagement的话，每次会相当监听两次，因为改变的都是commodityManagement的值。

Answer 2

把按钮部分的代码贴出来，JS 部分的代码也贴一下吧