w***@gmail.com
w***@gmail.com
  • 发布:2019-05-20 10:28
  • 更新:2022-05-10 16:36
  • 阅读:3120

【报Bug】v-model不能使用[]正确设置对象属性的值,只能单向显示属性值

分类:uni-app

详细问题描述

双向绑定问题,单向可显示属性的值,但setData失败

[内容]

最小化测试代码见下:
在上方input中输入字符,点击按钮触发绑定更新值,报错

Error: Only digits (0-9) can be put inside [] in the path string: obj.obj[k]

使用obj.a的v-model正常,v-model=obj['a']的可以正确显示值, 但不能更新值

重现步骤

<template>  
    <view class="content">  
        <view v-for="(k,i) in keys">  
            <input v-model="obj[k]" :placeholder="k">  
        </view>  
        <button @click="z+=1">aaa</button>  
        <input v-model="obj.a" placeholder="外">  

    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                z:1,  
                obj:{  
                    a:"",  
                    b:"",  
                    c:""  
                },  
                keys:["a","b","c"]  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>

[步骤]

在上方input中输入字符,点击按钮触发绑定更新值
使用obj.a的v-model正常,v-model=obj['a']的可以正确显示值, 但不能更新值

[结果]

,报错

Error: Only digits (0-9) can be put inside [] in the path string: obj.obj[k]

[期望]

正确双向绑定对象的属性

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

IDE运行环境说明

WebStorm 2019.1.1

uni-app运行环境说明

刚刚cli创建的默认模板项目

  System:  
    OS: Windows 10  
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz  
  Binaries:  
    Node: 8.11.0 - C:\Program Files\nodejs\node.EXE  
    Yarn: Not Found  
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD  
  Browsers:  
    Edge: 44.17763.1.0  
  npmPackages:  
    @dcloudio/uni-app-plus: * => 0.0.236  
    @dcloudio/uni-app-plus-nvue:  0.0.1  
    @dcloudio/uni-app-plus-nvue-v8:  0.0.1  
    @dcloudio/uni-cli-shared: * => 0.2.950  
    @dcloudio/uni-h5: * => 0.5.2  
    @dcloudio/uni-mp-alipay: * => 0.0.807  
    @dcloudio/uni-mp-baidu: * => 0.0.834  
    @dcloudio/uni-mp-toutiao: * => 0.0.334  
    @dcloudio/uni-mp-weixin: * => 0.0.956  
    @dcloudio/uni-template-compiler: * => 0.9.172  
    @dcloudio/vue-cli-plugin-hbuilderx: latest => 0.9.511  
    @dcloudio/vue-cli-plugin-uni: latest => 0.9.464  
    @dcloudio/webpack-uni-mp-loader: * => 0.3.624  
    @dcloudio/webpack-uni-pages-loader: * => 0.2.828  
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0  
    @vue/babel-plugin-transform-vue-jsx:  1.0.0  
    @vue/babel-preset-app:  3.7.0  
    @vue/babel-preset-jsx:  1.0.0  
    @vue/babel-sugar-functional-vue:  1.0.0  
    @vue/babel-sugar-inject-h:  1.0.0  
    @vue/babel-sugar-v-model:  1.0.0  
    @vue/babel-sugar-v-on:  1.0.0  
    @vue/cli-overlay:  3.7.0  
    @vue/cli-plugin-babel: 3.5.1 => 3.5.1  
    @vue/cli-service: ^3.7.0 => 3.7.0  
    @vue/cli-shared-utils:  3.7.0  
    @vue/component-compiler-utils:  2.6.0  
    @vue/preload-webpack-plugin:  1.1.0  
    @vue/web-component-wrapper:  1.2.0  
    mpvue-page-factory:  1.0.1  
    mpvue-template-compiler:  1.0.13  
    uni-h5-vue:  2.6.10  
    uni-mp-vue:  2.6.10  
    vue: ^2.6.10 => 2.6.10  
    vue-hot-reload-api:  2.3.3  
    vue-loader:  15.7.0  
    vue-router:  3.0.1  
    vue-style-loader:  3.1.2 (3.1.2)  
    vue-template-compiler: ^2.5.21 => 2.6.10  
    vue-template-es2015-compiler:  1.9.1  
    vuex: ^3.0.1 => 3.1.1  
    weex-vue-loader: ^0.7.0 => 0.7.0  
  npmGlobalPackages:  
    @vue/cli: Not Found  

联系方式

[QQ] 487256680

2019-05-20 10:28 负责人:无 分享
已邀请:
w***@gmail.com

w***@gmail.com (作者) - 小红

目前用的替代解决办法是@input的$event.detail.value来处理

3***@qq.com

3***@qq.com

111111111111111啥时候能解决啊
NVUE页面 input 使用 v-model="hour" 变量hour值修改后,视图不更新。

xiaojun617

xiaojun617

同样问题,是小程序不支持吗

特哦那首歌

特哦那首歌

同样的问题,希望能解决

小新的狗叫小白

要回复问题请先登录注册