非 WebDev 尝试在 vue3 上使用 primevue 构建基本 UI。尝试运行基本演示，但包含一些组件。不知道组件是否带有自己的 CSS 依赖项。
下面是我的 html 代码。我也尝试使用具有单独组件的 vue 项目并得到相同的结果
基本示例失败：
<html>
<head>
<meta charset="utf-8">
<title>PrimeVue Demo</title>
<link href="https://unpkg.com/primevue/resources/themes/saga-blue/theme.css" rel="stylesheet">
<link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
<link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/primevue/inputtext/inputtext.min.js"></script>
</head>
<body>
<div id="app">
<p-inputtext v-model="val"></p-inputtext>
<h6>{{val}}</h6>
</div>
<div class="p-d-flex">
<div class="p-mr-2">Item 1</div>
<div class="p-mr-2">Item 2</div>
<div>Item 3</div>
</div>
<div class="p-grid">
<div class="p-col-4">4</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
<div class="p-col">1</div>
</div>
<div class="p-grid">
<div class="p-col-2">2</div>
<div …案例：我正在PrimeVue一个项目中使用Vue.js。在本例中，我有一个下拉列表，作为 的组件PrimeVue，它使用对象数组。下拉组件如下所示：
<template #position>
<Dropdown
class="multiselect-fullsize"
v-model="selectedFilter[index].pos"
:options="filterPositions"
optionLabel="name"
placeholder="Position" />
</template>
这个下拉组件有一个:options属性，它引用以下数组：
filterPositions: [
{"name": "0", "value": "0"},
{"name": "1", "value": "1"},
{"name": "2", "value": "2"},
{"name": "3", "value": "3"},
{"name": "4", "value": "4"},
{"name": "5", "value": "5"},
{"name": "6", "value": "6"},
{"name": "7", "value": "7"},
{"name": "8", "value": "8"}
]
问题：有没有办法在此下拉列表中指定预先选定的项目PrimeVue？
编辑：根据文档，没有属性可以定义预选项目。所以也许，如果有一个解决方案，它也可能是JavaScript唯一的。
案例与问题
\nI\xc2\xb4m 在一个私人项目上工作，并且Vue.js出现以下错误，当 I\xc2\xb4m 尝试使用以下FileUpload组件时会发生此错误PrimeVue：
[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.\n尝试使用FileUpload：
[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.\n该错误仅在我尝试使用时发生FileUpload，如果删除它，该组件就会工作。FileUpload并按PrimeVue应有的方式进口main.js：
<template>\n <FileUpload name="demo[]" url="" @upload="onUpload" :multiple="true" :maxFileSize="1000000">\n <template #empty>\n <p>Drag and drop files to here to upload.</p>\n </template>\n </FileUpload>\n</template>\n到目前为止我尝试过的
\n我搜索了这个问题，但与此错误唯一完全匹配的是 …
我正在将PrimeVue Splitter与 Vue3 和组合 API 结合使用。我想让每个面板的大小动态化，所以当我单击按钮时，它们会返回到原始大小。
这就是我到目前为止所拥有的
<button @click="fixPanels()" >fix</button>
<Splitter style="height: 100%" class="mb-3">
<SplitterPanel :size=smallPanelSize >
Panel 1
</SplitterPanel>
<SplitterPanel :size=bigPanelSize >
Panel 2
</SplitterPanel>
</Splitter>
export default {
setup(){
let smallPanelSize = ref(30)
let bigPanelSize = ref(70)
const fixPanels = ()=>{
message.value = 30;
bigPanelSize.value = 70
}
return{smallPanelSize, bigPanelSize, fixPanels}
}
}
我可以自由调整面板的大小，但是当fixPanels单击 时，它们不会返回到原始大小。我想我必须以某种方式使用双向绑定，或者v-model但我不知道如何使用，这里没有输入。如果这是不可能的，您能否建议一个类似的可调整大小的面板组件，面板尺寸是动态控制的？
谢谢
所以我有一个 PrimeVue DataTable，其结构如下：
<DataTable value="info">
<Column header="Name" field="name" />
<Column header="Desc." field="desc" />
<Column header="Date" field="date" />
</DataTable>
DataTable 的值由数组“info”占据，该数组由从 API 提取的信息组成。我需要数据表中的某些行根据“info”中的属性“desc”显示为红色或绿色；我尝试通过以下方式来解决这个问题：
使用行样式
<DataTable value="info" :rowStyle="desc === 'Disconnected' ? 'color:red' : null">
<Column header="Name" field="name" />
<Column header="Desc." field="desc" />
<Column header="Date" field="date" />
</DataTable>
我使用了 rowStyle 的多种变体，但我遇到的主要问题是在实现所述样式时访问 DataTable 中的变量。我想另一种方法可以是使用 ColumnGroup 然后分配一个<Row>值，然后使用相应的颜色更改对其进行修改？
有什么帮助吗？谢谢！