vue.js 中的重構方法

Question

我正在制作一個寵物項目，一個 html 網站，其中包含一些通過 vue.js 生成的表格我覺得我的代碼可以通過折射來簡化很多，但我不知道該放什么以及放在哪里，請在以下代碼中查看我的問題

var players = [
    { ID: 1, NAME: "Chandler Bing", TEL: '305-917-1301', rank: '3 dan' }
];
var criteria = ["ID", "NAME", "TEL", "rank"];
let crit = [
    {
        name: "ID",
        show: true
    },
    {
        name: "NAME",
        show: true
    },
    {
        name: "TEL",
        show: false
    },
    {
        name: "rank",
        show: true
    }
]
const Standings = {
    template: `<div v-cloak id="editable" style="background-color:#adb8ff">
    <div id="form">
        <label for="pname">Player:</label>
        <input v-model="pname" v-on:keyup.enter="playerSubmit" type="text" 
        id="pname" name="pname">
        <label for="rank">Rank:</label>
        <input v-model="rank" v-on:keyup.enter="playerSubmit" type="text" 
        id="rank" name="rank" size="2">
        <select id="rankT" name="RankType">
            <option value="dan">dan</option>
            <option value="kyu">kyu</option>
        </select>
        <button v-on:click="playerSubmit">Enter</button>
    </div>
    <div>
        <button v-on:click="previousRound" id="button">Previous Round</button>
        <button v-on:click="addRound" id="button">Next Round</button>
    </div>
    <table class="fixed" id="tournament">
       <!--  <col width="5px" />
        <col width="50px" />
        <col width="10px" /> -->
        <thead>
            <tr>
                <th v-for="col in columns">{{col.name}}</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="row in rows">
                <td v-for="col in columns">{{row[col.name]}}</td>
            </tr>
        </tbody>
    </table>
    <table class="settings">
        <col width="20px" />
        <thead>
            <tr>
                <th>SETTINGS</th>
            </tr>
        </thead>
        <tr>
            <td>Stuff</td>
        </tr>
    </table>
</div>`,
    props: [],
    methods: {
        playerSubmit: function () {
            players.push({
                ID: i,
                NAME: this.pname,
                TEL: "placeholder",
                rank: this.rank + " " + document.getElementById("rankT").value
            });
            i++
            this.pname = "";
            this.rank = "";
            return false;
        },
        addRound: function () {
            var pushActive = {};
            var counterT = counter.toString();
            players.forEach(p => p[counter] = "");
            pushActive = { name: counterT, show: true };
            activeCriteria.push(pushActive);
            var found = false;
            found = crit.filter(c => c.name == counterT).length > 0;

            if (!found) {
                crit.push(pushActive);

            }
            counter = counter + 1;

            found = false;
        },
        previousRound: function () {
            var l = crit.length - 1;
            if (counter > 1) {
                crit[l].show = false;
                activeCriteria.pop(activeCriteria[l]);
                counter = counter - 1;
            }

        }

    },
    data: function() {
        return {
        pname: "",
        rank: "",
        rows: players,
        columns: activeCriteria
    }
    }

}
const Pairings = {
    template: `<div v-cloak id="editable" style="background-color:#aaabca">
    <table class="fixed" id="tournament">
    <!--  <col width="5px" />
     <col width="50px" />
     <col width="10px" /> -->
     <thead>
         <tr>
            test
         </tr>
     </thead>
     <tbody>

     </tbody>
 </table>
 </div>`
}
const router = new VueRouter({
    routes: [
        { path: '/standings', component: Standings },
        { path: '/pairings', component: Pairings },
        { path: '*', redirect: '/standings' }
    ]
})
var activeCriteria = crit.filter(c => c.show);
var i = 1;
var counter = 1;
/* const app = new Vue({ router }).$mount('#app') */
var editable = new Vue({
    router,
    el: '#editable',
    data: {
        pname: "",
        rank: "",
        rows: players,
        columns: activeCriteria
    },

    methods: {
        playerSubmit: function () {
            players.push({
                ID: i,
                NAME: this.pname,
                TEL: "placeholder",
                rank: this.rank + " " + document.getElementById("rankT").value
            });
            i++
            this.pname = "";
            this.rank = "";
            return false;
        },
        addRound: function () {
            var pushActive = {};
            var counterT = counter.toString();
            players.forEach(p => p[counter] = "");
            pushActive = { name: counterT, show: true };
            activeCriteria.push(pushActive);
            var found = false;
            found = crit.filter(c => c.name == counterT).length > 0;

            if (!found) {
                crit.push(pushActive);

            }
            counter = counter + 1;

            found = false;
        },
        previousRound: function () {
            var l = crit.length - 1;
            if (counter > 1) {
                crit[l].show = false;
                activeCriteria.pop(activeCriteria[l]);
                counter = counter - 1;
            }

        }
    }
})

你會注意到我在排名和可編輯中都有相同的方法，那是因為如果我不在這兩個中聲明這些方法，我的代碼現在將無法工作我不確定並糾正我，如果我錯了但是我覺得我可以將這些方法放在其他地方，所以我的代碼中只會有這些方法的一個實例

Answer 1

您可以做的是創建一個 .js 文件來托管您的函數：

YourFunctions.js

export const playerSubmit = () => {
            players.push({
                ID: i,
                NAME: this.pname,
                TEL: "placeholder",
                rank: this.rank + " " + document.getElementById("rankT").value
            });
            i++
            this.pname = "";
            this.rank = "";
            return false;
        };
export const addRound = () => {
            var pushActive = {};
            var counterT = counter.toString();
            players.forEach(p => p[counter] = "");
            pushActive = { name: counterT, show: true };
            activeCriteria.push(pushActive);
            var found = false;
            found = crit.filter(c => c.name == counterT).length > 0;

            if (!found) {
                crit.push(pushActive);

            }
            counter = counter + 1;

            found = false;
        };

export const previousRound = () => {
            var l = crit.length - 1;
            if (counter > 1) {
                crit[l].show = false;
                activeCriteria.pop(activeCriteria[l]);
                counter = counter - 1;
            }

        }

然后在 Vue 應用程序的頂部，您將能夠像這樣導入這些函數：

import { playerSubmit, addRound, previousRound} from './YourFunctions.js';

然后你可以像往常一樣使用它們:)

看看這里的一些額外閱讀： https : //forum.vuejs.org/t/how-to-use-helper-functions-for-imported-modules-in-vuejs-vue-template/6266/2

VueJS 在 vue 組件中訪問外部導入的方法