如何將游標聚焦在vue模板表單生成器中的第一個輸入上？

我正在使用的示例可以在本頁自述檔案中的示例中找到：

https://github.com/vue-generators/vue-form-generator

我試圖讓游標專注于 vue 表單生成器中的第一個輸入，在本例中為名稱。

到目前為止，我已經嘗試添加attributes: {'autofocus':true}到Vuejs VueFormGenerator 焦點輸入欄位中建議的架構，如下所示：

schema: {
            fields: [{
                        attributes: {'autofocus':true}, ...

但它不集中。我也嘗試將 ref 標簽放在某個地方，所以我可以做這樣的事情。$refs.refname.focus() 但它似乎沒有放在任何地方。

有任何想法嗎？

這是Javascript代碼：

var vm = new Vue({
    el: "#app",
    
    components: {
        "vue-form-generator": VueFormGenerator.component
    },

    data() {
            return {
        model: {
            id: 1,
            name: "John Doe",
            password: "J0hnD03!x4",
                        age: 35,
            skills: ["Javascript", "VueJS"],
            email: "[email protected]",
            status: true
        },
        schema: {
            fields: [{
                type: "input",
                                inputType: "text",
                label: "ID",
                model: "id",
                readonly: true,
                featured: false,
                disabled: true
            }, {
                type: "input",
                                inputType: "text",
                label: "Name",
                model: "name",
                readonly: false,
                featured: true,
                required: true,
                disabled: false,
                placeholder: "User's name",
                validator: VueFormGenerator.validators.string
            }, {
                type: "input",
                                inputType: "password",
                label: "Password",
                model: "password",
                min: 6,
                required: true,
                hint: "Minimum 6 characters",
                validator: VueFormGenerator.validators.string
            }, {
                type: "input",
                inputType: "number",
                label: "Age",
                model: "age",
                                min: 18,
                validator: VueFormGenerator.validators.number
            }, {
                type: "input",
                                inputType: "email",
                label: "E-mail",
                model: "email",
                placeholder: "User's e-mail address",
                validator: VueFormGenerator.validators.email
            }, {
                type: "checklist",
                label: "Skills",
                model: "skills",
                multi: true,
                required: true,
                multiSelect: true,
                values: ["HTML5", "Javascript", "CSS3", "CoffeeScript", "AngularJS", "ReactJS", "VueJS"]
            }, {
               type: "switch",
                label: "Status",
                model: "status",
                multi: true,
                readonly: false,
                featured: false,
                disabled: false,
                default: true,
                                textOn: "Active",
                                textOff: "Inactive"
            }]
        },

        formOptions: {
            validateAfterLoad: true,
            validateAfterChanged: true
        }
            };
    },
    
    methods: {
        prettyJSON: function(json) {
            if (json) {
                json = JSON.stringify(json, undefined, 4);
                json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
                return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d (?:\.\d*)?(?:[eE][ \-]?\d )?)/g, function(match) {
                    var cls = 'number';
                    if (/^"/.test(match)) {
                        if (/:$/.test(match)) {
                            cls = 'key';
                        } else {
                            cls = 'string';
                        }
                    } else if (/true|false/.test(match)) {
                        cls = 'boolean';
                    } else if (/null/.test(match)) {
                        cls = 'null';
                    }
                    return '<span >'   match   '</span>';
                });
            }
        }
    },
});

完整代碼見：https ://codepen.io/zoul0813/pen/OrNVNw

編輯：將 id 更改為 name

uj5u.com熱心網友回復：

首先，您不能關注 ID 欄位，因為它被禁用且只讀。其次，由于您無法添加需要訪問的 ref，因此可以通過 getElementById 之類的 document.getElementById("id").focus()

這里是codepen：https ://codepen.io/mxmstolz/pen/WNXXyrr

標籤：Vue.js

上一篇：lint-staged在提交時生成新的.eslintcache檔案

下一篇：如何使用if陳述句禁用vue.js中的按鈕？