标签: vuejs3

这是我第一次使用 Tailwind\xc2\xa0CSS，我不明白为什么颜色不起作用。这是Laravel Jetstream的全新安装，附带 Tailwind CSS、Vue.js\xc2\xa03、Vite 和 Inertia。

如果动态添加类，似乎不会从 Tailwind\xc2\xa0CSS 导入相关样式。

这是一些基本组件：

<template>\n    <div :class="style" class="border-l-4 p-4" role="alert">\n        <p><slot name="headline"></slot></p>\n        <p class="pt-3" v-if="slots.error"><span class="font-bold">Message:</span><slot name="error"></slot></p>\n        <div class="my-3" v-if="slots.info"><slot name="info"></slot></div>\n    </div>\n</template>\n<script setup>\n    import { useSlots } from \'vue\'\n    const slots = useSlots()\n</script>\n<script>\nexport default {\n    name: \'Alert\',\n    props: {\n        color: {type: String, default: \'red\'}\n    },\n    computed: {\n        style() {\n            return `bg-${this.color}-100 border-${this.color}-500 text-${this.color}-700`\n        }\n    }\n\n}\n</script>\n

尽管类存在，但使用类似的东西没有任何与颜色相关的样式：

<Alert color="orange" class="my-5">\n    <template #headline>Test</template>\n</Alert>\n

但是，如果动态类也在同一页面的某处指定，那么一切都会正常。

IE，

我的数组中有对象（产品）。每个产品都有自己的评级，评级是来自数据库的数字。我在产品本身上显示每个产品的四舍五入平均评分。

{{ Math.round(Object.values(product.rating)[0]) }}\n

我想显示人们用来评价产品的星星（单选按钮）的平均值。如果我点击对产品进行评分，则应检查与当前评分匹配的星星数量。在单个产品上，我可以只使用v-model，但是如果列表中有一堆产品并且每个产品都有不同的评级，我该怎么办？

每个单选按钮的值是 ID 和 value 属性。如何将单选按钮的 ID 或值与产品的当前评级相匹配？

没有this，所以我尝试这样做，但显然不起作用：

<div class="rating">\n  <input\n    type="radio"\n    value="5"\n    id="5"\n    :checked="\n    this.value ==\n    Math.round(Object.values(product.rating)[0])\n    "\n    @change="rateproduct"\n    /><label for="5">\xe2\x98\x86</label>\n  <input\n    type="radio"\n    value="4"\n    id="4"\n    @change="rateproduct"\n    :checked="\n    this.value ==\n    Math.round(Object.values(product.rating)[0])\n    "\n    /><label for="4">\xe2\x98\x86</label>\n  <input\n    type="radio"\n    value="3"\n    id="3"\n    @change="rateproduct"\n    :checked="\n    this.value ==\n    Math.round(Object.values(product.rating)[0])\n    "\n    /><label for="3">\xe2\x98\x86</label>\n  <input\n    type="radio"\n    value="2"\n    id="2"\n    @change="rateproduct"\n    :checked="\n    this.value ==\n    Math.round(Object.values(product.rating)[0])\n    "\n    /><label for="2">\xe2\x98\x86</label>\n  <input\n    type="radio"\n    value="1"\n    id="1"\n    @change="rateproduct"\n    :checked="\n    this.value ==\n …

我正在构建一组 Vuetify“芯片”，可以将数据从一个芯片拖到另一个芯片：

<v-container id="endgrid" style="max-width: 300px; position: relative;">
  <v-row v-for="(row,r) in endGrid">
      <v-chip  size="x-large"  
       v-for="(chip,c) in row"
        :key="chip.name" 
        draggable="true"
        @drop="drop($event)"
        @dragover="allowDrop($event)"
        @dragstart="drag($event)"
        :id=idString(1,r,c)
        > {{ chip.name }}  </v-chip>
  </v-row>
</v-container>

它按预期工作。但在文档创建过程中，对于每一项（共 25 项）创建，我都会收到此警告（在调试控制台中）chip：

[Vue warn]: Invalid prop: type check failed for prop "draggable". Expected Boolean, got String with value "true". 
   at <VChip size="x-large" key=43 draggable="true"  ... >

我确信正确的语法draggable是字符串，而不是布尔值。虽然如果我删除引号，警告仍然出现 - 但代码仍然有效。我担心的是

• 这可能隐藏了我的代码中的其他错误
• 即使没有，浏览器调试控制台中出现的那些警告看起来也不太好！

由于它可能是相关的，因此用于构建网格的数据如下所示：

onBeforeMount(() => {
  var index = 1;
  for (var i = 0; i …

我从 Vue2 迁移到 vue3，从 cli 迁移到 vite（使用 Vuetify），然后收到此错误。

[plugin:vite:css] 无法加载 PostCSS 配置 (searchPath: ...): [Error] 加载 PostCSS 插件失败: ES 模块 C:\Users...\src\vue\node_modules\vuetify\ 的 require()不支持 lib\framework.mjs。相反，将 C:\Users...\src\vue\node_modules\vuetify\lib\framework.mjs 的 require 更改为所有 CommonJS 模块中都可用的动态 import() 。

router.js:1
无法加载资源：服务器响应状态为 500（内部服务器错误） App.vue:1
无法加载资源：服务器响应状态为 500（内部服务器错误） main.css： 1
无法加载资源：服务器响应状态为 500（内部服务器错误）

我尝试删除模块并重新安装它，还尝试添加 postcss.config.js 文件，但对我没有任何作用

包.json

  "versionMessage": "",
  "private": true,
  "scripts": {
    "serve-dev": "vue-cli-service serve --mode development",
    "build-dev": "vue-cli-service build --mode development",
    "build-prod": "vue-cli-service build --mode production",
    "prep-deploy": "node prep_deployment.js",
    "lite": "lite-server",
    "dev": "vite",
    "build": "vite build",
    "test": "vite test", …

我正在学习 Vue 并尝试使用组件标签学习动态渲染。这段代码有什么问题？控制台中没有显示任何错误，但单击按钮仍然不显示所需的组件。它确实可以与 v-if 一起使用，但我接下来的讲座的重点是使用组件动态渲染。哪个不起作用：

<template>
  <div>
    <the-header></the-header>
    <button @click="setSelectedComponent('active-goals')">Active goals</button>
    <button @click="setSelectedComponent('manage-goals')">Manage goals</button>
    <component :is="selectedTab"></component>
  </div>
</template>

<script setup>
/* eslint-disable no-unused-vars */
import { ref, defineExpose, defineComponent } from 'vue';
import TheHeader from './components/TheHeader.vue';
import ActiveGoals from './components/ActiveGoals.vue';
import ManageGoals from './components/ManageGoals.vue';

const selectedTab = ref('active-goals');
const setSelectedComponent = (tab) => {
  selectedTab.value = tab;
};

defineExpose({
  selectedTab,
  setSelectedComponent,
});

defineComponent({
  components: {
    TheHeader,
    ActiveGoals,
    ManageGoals,
  },
});
</script>

<style>
html {
  font-family: sans-serif;
}

body {
  margin: …

Vue 有没有办法将所有发射器发送给父级监听？

例如转动该代码：

<DetailsPages
  v-if="$route.hash === '#details_pages'"
  v-on:next="$emit('next')"
  v-on:need-to-save="save => $emit('need-to-save', save)"
  v-on:goto-step="step => $emit('goto-step', step)"
/>
<DetailsContact
  v-if="$route.hash === '#details_contact'"
  v-on:next="$emit('next')"
  v-on:need-to-save="save => $emit('need-to-save', save)"
  v-on:goto-step="step => $emit('goto-step', step)"
/>
<DetailsInfo
  v-if="$route.hash === '#details_info'"
  v-on:next="$emit('next')"
  v-on:need-to-save="save => $emit('need-to-save', save)"
  v-on:goto-step="step => $emit('goto-step', step)"
/>

像这样的事情：

<DetailsPages v-if="$route.hash === '#details_pages'" v-on:emit="$emit" />
<DetailsContact v-if="$route.hash === '#details_contact'" v-on:emit="$emit" />
<DetailsInfo v-if="$route.hash === '#details_info'" v-on:emit="$emit" />

在 Cypress 中，我在执行任何其他测试后更改了 Veu3 应用程序的视口，它给出了错误：“（未捕获的执行）TypeError a.value is null”。

产生错误的最小应用程序：

<script setup>
  import { ref, onMounted } from 'vue'
  const a = ref(null)
  
  onMounted (() => {
    function onWindowResize() {
      window.addEventListener("resize", () => {
        //a.value always needs to refresh when the window resizes to different content
        a.value.textContent = 'Text displayed here will be decided on the window size'
      })
    }
    onWindowResize()
  })
</script>

<template>
<div>
  <span ref="a" data-testid="test1">M</span>
  <a> ..more</a>
</div>
</template>

通过以下测试。这里需要注意的有趣的事情是，如果您不包含第一个测试，则不会出现错误。

import Test from '../Test.vue'

describe('run 2 test', () …

我正在尝试使用 TypeScript 和基于类的组件来设置 Vue 3。但是，我在将Component装饰器导入Vue构造函数时不断出错：

This expression is not callable. Type 'typeof
import("/Users/*folder*/node_modules/vue-class-component/dist/vue-class-component")'
has no call signatures. Vetur(2349)

Run Code Online (Sandbox Code Playgroud)

我的代码.vue：

This expression is not callable. Type 'typeof
import("/Users/*folder*/node_modules/vue-class-component/dist/vue-class-component")'
has no call signatures. Vetur(2349)

我正在尝试在 Vue.js 3 中设置自定义分隔符，但它似乎不起作用。

我尝试的第一件事是delimiters像这样设置组件参数：

export default defineComponent({
    delimiters: ["${", "}$"],
    // ...
})

但什么也没有发生。

然后我尝试像这样设置main.ts文件：

import { createApp } from "vue";
import router from "./router";
import App from "./App.vue";

App.delimiters = ["${", "}$"];

createApp(App)
   .use(router)
   .mount("#app");

模板中的字符串插值再次不起作用。

我错过了什么？

尝试 1

主文件

import { createApp } from 'vue'
import { store } from './store/store'
import App from './App.vue'

Vue.config.productionTip = false

const app = createApp(App)

app.use(store)

app.mount('#app')

商店.js

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    patients: []
  }
});

尝试 1 错误

Uncaught TypeError: Cannot read property 'use' of undefined
    at eval (store.js?07a4:4)
    at Module../src/store/store.js (app.js:1342)

尝试 2

主文件

import { createApp } from 'vue'
import { store } …