Question

我使用Javascript函数在Vue.js的选项卡中调用HTML表单。该方法未从main.js调用index.html。

我已经在Google上搜索了几个小时，并且对Vue完全陌生。我使用了v-model和v-bind来调用它，并在带有属性onload的“”标签中进行了此操作。

我的index.html文件：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Vue Form</title>
    <style>
        body {
            background-color: grey;
        }

        form {
            background-color: lightgrey;
            margin: 0% 35% 0% 35%;
        }

        label {
            font-family: monospace;
            font-size: 15px;
        }
    </style>
</head>

<body>
    <div id="form">
        <form v-model:onload="addPerson(1)">
            <button @click="addPerson(tabNum++)">Add a Person</button>
            <br><br>
            <button @click="this.tabs.slice.stop">Remove a Person</button>
            <br><br>
            <button type="submit" target="">Submit</button>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="main.js"></script>
</body>
</html>

我的main.js文件：

Vue.Component('form & tab', {
    methods: {
        addTitle(tabNum) {
            var title = 'Person ' + tabNum
            return {
                title
            }
        },

        addPerson(tabNum) {
            <b-tabs>
                <b-tab title="addTitle(tabNum)">
                    <div>
                        <label>First Name: </label><br></br>
                        <input v-model="firstname" maxlength="15"></input>
                        <br></br><br></br>

                        <label>Last Name: </label><br></br>
                        <input v-model="lastname" maxlength="15"></input>
                        <br></br><br></br>

                        <label>Initials: </label><br></br>
                        <input v-model="initials" maxlength="2"></input>
                        <br></br><br></br>

                        <label>Date of Birth: </label><br></br>
                        <input v-model="dob" placeholder="DD/MM/YYYY" 
                        maxlength="10"></input>
                        <br></br><br></br>

                        <label>Postal Address: </label><br></br>
                        <input v-model="postalAddress" maxlength="7"> 
                        </input>
                        <br></br><br></br>

                        <label>City: </label><br></br>
                        <input v-model="city" maxlength="50"></input>
                        <br></br><br></br>

                        <label>Country: </label><br></br>
                        <input v-model="country" maxlength="20"></input>
                        <br></br><br></br>

                        <label>Province/State: </label><br></br>
                        <input v-model="provinceState" maxlength="50"> 
                        </input>
                        <br></br><br></br>
                    </div>
                </b-tab>
            </b-tabs>
        }
    }
})

var app = new Vue({
    el: '#form',
    data: {
        firstname: null,
        lastname: null,
        initials: null,
        dob: null,
        postalAddress: null,
        city: null,
        country: null,
        provinceState: null,
        tabNum: 0
    }
})

预期结果：

我正在尝试获取一个动态的Vue.js表单，用户可以在其中输入数据，然后单击一个按钮以添加另一个具有相同HTML表单的标签。同时通过单击另一个按钮来删除选项卡。

实际结果：

未调用Vue方法。因此，除了按钮和CSS外，什么都没有出现。标签内没有表格。

Answer 1

Jup我也认为addPerson()需要返回一个值。
我想您要为一个新人员添加一列/行吗？
您无需使函数每次都返回HTML，而是可以像这样使用v-for（List Rendering）：

<form>
   <personData v-for="person in persons" :dob="person.dob" :lName="person.lName" .../>
</form>

data(){
 return {
   persons: [
     {dob: '8.21.1990,
     lName: 'Doe',
     fName: 'John},
     {dob:......
   ]
 }
}

因此，通过将您的代码从addPerson包装到单个组件（personData）中，可以使代码更整洁并且更具可读性。
如果您要向persons添加新人，则会显示新行

Vue.js函数未以HTML形式调用

1 个答案: