账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue把输入框的值添加到数据里并回显
    34
    0

    input的输入值,不能添加到对应的数据里

    使用的antdesign vue,代码结构如下

    相关代码

    // 请把代码文本粘贴到下方(请勿用图片代替代码)

    <template>
        <div class="chapterInfo">
            <p class="chapterInfo-title">章节信息</p>
            <div v-for="(item, index) in chapterInfo" :key="index">
                <a-collapse :bordered="false" accordion @change="changeActivekey">
                    <a-collapse-panel :header="item.header" :key="index" :showArrow="false">
                        <a-radio-group @change="chapterInfoTitle">
                            <p v-for="(itemTitle, index) in item.chapterInfoTitle" :key="index">
                                <a-radio-button :value="index">{{ itemTitle.title }}</a-radio-button>
                            </p>
                        </a-radio-group>
                        <p><a-input placeholder="在此处输入章节标题" @change="onChangeInputchapterInfoTitle"></a-input></p>
                    </a-collapse-panel>
                </a-collapse>
            </div>
        </div>
    </template>
    
    <script>
    export default {
        data() {
            return {
                chapterInfo: [
                    {
                        header: '第一章',
                        chapterInfoTitle: [
                            {
                                title: '第一节'
                            },
                            {
                                title: '第二节'
                            },
                            {
                                title: '第三节'
                            }
                        ],
                    },
                    {
                        header: '第二章',
                        chapterInfoTitle: [
                            {
                                title: '第一节'
                            },
                            {
                                title: '第二节'
                            },
                            {
                                title: '第三节'
                            }
                        ],
                    },
                    {
                        header: '第三章',
                        chapterInfoTitle: [
                            {
                                title: '第一节'
                            },
                            {
                                title: '第二节'
                            },
                            {
                                title: '第三节'
                            }
                        ],
                    },
                    {
                        header: '第四章',
                        chapterInfoTitle: [
                            {
                                title: '第一节'
                            },
                            {
                                title: '第二节'
                            },
                            {
                                title: '第三节'
                            }
                        ],
                    }
                ]
            };
        },
        methods: {
            onChangeInputchapterInfoTitle(){
                
            }
        }
    };
    </script>
    
    <style></style>
    
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 後來我們都哭了 普通会员 1楼

      在 Vue 中,你可以使用 v-model 标签来双向数据绑定。以下是一个简单的例子:

      首先,我们需要在 data 中定义一个数组,然后在 created 中初始化这个数组:

      javascript export default { data() { return { inputValue: '', inputValues: [] } }, created() { this.inputValues = this.$input.value.split(',') } }

      然后,你可以在模板中使用 v-model 标签来绑定输入框的值,并在回显时显示所有输入框的值:

      ```html

      {{ inputValues }}

      ```

      updateValues 方法中,你可以将输入框的值添加到 inputValues 数组中:

      javascript methods: { updateValues() { this.inputValues.push(this.$input.value); } }

      这样,你就可以在输入框的值改变时,将新的值添加到 inputValues 数组中,然后在回显时显示所有输入框的值了。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部