小编Bam*_*nny的帖子

拜托，我正在学习 VueJS 3，我可能有初学者问题。我在浏览器开发者控制台中发出了这样的警告：

消息是：

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.\n

我正在将对象数组传递给子组件。在我的父views/Home.vue组件中，我有这样的实现：

[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes.\n

在子组件中components/ItemProperties.vue我有以下代码：

<template>\n  <div class="wrapper">\n    <section v-for="(item, index) in items" :key="index" class="box">\n      <ItemProperties class="infobox-item-properties" :info="item.properties" />\n    </section>\n …

拜托，我对tailwindCSS有疑问。我正在尝试制作投票按钮（像和磁盘一样）。我使用 flex 作为 的按钮和footer标签section。

请问，您能帮我如何将投票否决的文本对齐到右侧吗？

如何对齐标签中的文本footer？

这是我的代码（在此代码下方您可以找到游乐场的链接）

<main class="h-screen bg-gradient-to-b from-red-700 to-pink-200">
  <div class="p-5">
    <article class="max-w-xs mx-auto bg-white rounded-2xl shadow-md overflow-hidden">
      <figure>
        <img class="object-scale-down w-96" src="https://images.pexels.com/photos/5276584/pexels-photo-5276584.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=200&w=200" alt="Man looking at item at a store" />
      </figure>
      <article>
        <section class="flex text-2xl font-bold text-white p-2">
          <div class="flex-1 text-left bg-green-100 text-black rounded-xl mx-1 px-2">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" viewBox="0 0 20 20" fill="currentColor">
              <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 …

我正在使用 VueJS 3 应用程序，其中使用vue-router、vue和core-js应用程序，我想在其中使用组件。我的视图目录Home.vue文件如下所示：

<template>
  <div class="wrapper">
    <section v-for="(item, index) in items" :key="index" class="box">
      <div class="infobox">
        <PictureBox image="item.picture" />
        <PropertyBox itemProperty="item.properties" />
      </div>
    </section>
  </div>
</template>

<script>
import { ref } from 'vue'
import { data } from '@/data.js'
import { PictureBox } from '@/components/PictureBox.vue'
import { PropertyBox } from '@/components/PropertyBox.vue'

export default {
  components: {
    PictureBox,
    PropertyBox,
  },
  methods: {
    addRow() {
      console.log('This add new row into table')
    }, …