第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

Javascript (Vue.js) - 將表格行添加到 DOM 中的錯誤節(jié)點

Javascript (Vue.js) - 將表格行添加到 DOM 中的錯誤節(jié)點

白板的微信 2022-05-26 16:36:25
我正在嘗試為第 5 版龍與地下城創(chuàng)建一個主動跟蹤器。使用 Vue 中包含的 fetch 函數(shù)，我已經(jīng)能夠從游戲中獲取所有免費可用的怪物的列表，并將它們渲染成一個無序列表。我onclick為列表中的每個項目添加了一個事件，以便在單擊名稱時，將怪物對象的新實例附加到initiativeOrder變量后自動添加到主動表中，但我注意到一些異常行為。首先，單擊列表中的名稱會導(dǎo)致新的表格行出現(xiàn)在 DOM 的表格之外。其次，如果您多次單擊相同的名稱，它不會在表格中添加具有相同信息的另一行，這是我所期望的。如何更改標(biāo)記和腳本，以便每次單擊列表中的項目時，新項目總是出現(xiàn)在表中的適當(dāng)位置？<!doctype html><html class="no-js">    <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>                 
查看完整描述

1 回答

?
慕無忌1623718

TA貢獻(xiàn)1744條經(jīng)驗 獲得超4個贊

您的問題是自定義tr組件。Table 只需要tbody, thead, tr, td,th元素，所以其他元素而不是預(yù)期的元素不屬于 table。您必須將整個表格放在組件中。


這個問題與任何虛擬節(jié)點框架（如 Angular）有關(guān)，而不僅僅是 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>


查看完整回答
反對 回復(fù) 2022-05-26
  • 1 回答
  • 0 關(guān)注
  • 111 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號