个人中心
gpt4 book ai didi

Javascript (Vue.js) - 将表行添加到 DOM 中的错误节点

转载 作者：行者123 更新时间：2023-11-28 03:03:09 24 4
gpt4 key购买 nike

我正在尝试为第五版《龙与地下城》创建一个主动跟踪器。使用 Vue 中包含的 fetch 函数，我已经能够从游戏中获取所有免费怪物的列表，并将它们呈现为无序列表。我添加了onclick事件到列表中的每个项目，以便当单击名称时，怪物对象的新实例在附加到 initiativeOrder 后会自动添加到倡议表中。变量，但我注意到一些异常行为。

首先，单击列表中的名称会导致新的表格行出现在关于 DOM 的表格外部。其次，如果您多次单击同一名称，它不会在表中添加具有相同信息的另一行，这正是我所期望的。

如何更改标记和脚本，以便每次单击列表中的项目时，新项目始终出现在表中的适当位置？

<!doctype html>
<html class="no-js" lang="en-GB">
    <head>
        <meta charset="utf-8">
        <title>Final Year Project | Battle Tracker for 5th Edition Dungeons and Dragons</title>
        <meta name="description" content="A Battle Tracker for 5th edition Dungeons and Dragons written using Progressive Web Technologies.">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="manifest" href="site.webmanifest">
        <link rel="apple-touch-icon" href="icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/boilerplate.css">

        <meta name="theme-color" content="#160a0b">
    </head>

    <body>
        <!--[if IE]>
        <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->

        <main id="app">
            <div class="sidebar">
                <nav id="commands">
                    <ul>
                        <li>
                            <button type="button">Begin Encounter</button>
                        </li>
                    </ul>
                </nav>
            </div>
            <div id="library">
                <ul>
                    <creature-listing
                    v-for="(index, creature) in creatures"
                    v-bind:creature="creature"
                    v-on:click="addCreature(index)"></creature-listing>
                </ul>
            </div>
            <div id="initiative">
                <table>
                    <thead>
                        <tr>
                            <th>Initiative</th>
                            <th>Name</th>
                            <th>Hit Points</th>
                            <th>Armor Class</th>
                        </tr>
                    </thead>
                    <tbody>
                        <combatant
                        v-for="combatant in initiativeOrder"
                        v-bind:combatant="combatant">
                    </tbody>
                </table>
            </div>
        </main>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
        <!-- <script src="serviceworker.js"></script> -->
        <script src="js/app.js"></script>
    </body>
</html>
Vue.component(
    'creature-listing',
    {
        props: [
            'creature'
        ],
        template: '<li>{{ index }} {{ creature.name }}</li>'
    }
);

Vue.component(
    'combatant',
    {
        props: [
            'combatant'
        ],
        template: `
            <tr>
                <td>?</td>
                <td>{{ combatant.name }}</td>
                <td>{{ combatant.hit_points }}</td>
                <td>{{ combatant.armor_class }}</td>
            </tr>
        `
    }
)

var app = new Vue({
    el: '#app',
    data: {
        creatures: [],
        initiativeOrder: []
    },
    methods: {
        addCreature: function (index) {
            this.initiativeOrder.push(this.creatures[index]);
        }
    },
    created: function () {
        // this runs when the component is mounted
        fetch("creatures.json")
            .then(data => data.json())
            .then(creatures => { this.creatures = creatures })
    }
});

最佳答案

您的问题是自定义 tr 组件。表只需要 tbody、thead、tr、td、th 元素，因此其他元素而不是预期元素不属于表。您必须将整个表格放入组件中。

这个问题与任何虚拟节点框架(如 Angular)有关，而不仅仅是 vue。

示例:

new Vue({
  data: {
    rows:["row1", "row2"]
  },
  components: {
    myrows: {
      props: ['row'],
      template:'<tr><td>{{row}}</td></tr>',
    },
    mytable: {
      props: ['rows'],
      template:'<table><tr><td>TEST</td></tr><tr v-for="row in rows"><td>{{row}}</td></tr></table>',
    }
  }
}).$mount('div')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div>
  <table style='border:2px solid blue'><tr><td>TEST</td></tr><myrows v-for='row in rows' :row='row'></myrows></table>
  <mytable style='border:2px solid red' :rows='rows'></mytable>
</div>

您必须在组件中提供整个表格。您的代码必须如下所示:

new Vue({
  data: {
    creatures: [
      {name:"Bat", hit_points: 200, armor_class: 5},
      {name:"Org", hit_points: 250, armor_class: 25}
    ]
  },
  components: {
    creatures: {
      props: ['data'],
      template: `<table> 
                    <thead>
                        <tr>
                            <th>Initiative</th>
                            <th>Name</th>
                            <th>Hit Points</th>
                            <th>Armor Class</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for='combatant in data'>
                            <td>?</td>
                            <td>{{ combatant.name }}</td>
                            <td>{{ combatant.hit_points }}</td>
                            <td>{{ combatant.armor_class }}</td>
                        </tr>
                    </tbody>
                </table>`
    }
  }
}).$mount('div')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="initiative">
  <creatures :data="creatures"></creatures>
</div>

关于Javascript (Vue.js) - 将表行添加到 DOM 中的错误节点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60813595/

24 4 0
文章推荐： javascript - 如何修改这个 axios 对象以便我可以在各种 header 之间进行选择？
文章推荐： html - 使用正则表达式和 javascript 在 html 中突出显示单词 - 差不多了
文章推荐： html - Bootstrap - 根据方向更改网格
文章推荐： javascript - 如何在我的网站中嵌入 Google 云端硬盘文件夹
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com