v-model 相关问题

如何在VUE中使用参数访问v-model值

我想使用参数访问 v-model 值，我尝试下面的代码我想使用参数访问 v-model 值，我尝试下面的代码 <template> <div v-for="(item, idx) in data"> <input :id="item" :v-model="item"></input> <button @click="submitTest(item)"> testbtn </button> </div> </template> <script setup> var data = {'test1': 'val1', 'test2': 'val2'} function submitTest(itemParam){ alert(itemParam.value) } </script> 实际上在submitTest函数（警报行）中，它不访问输入标签v-model，而是访问itemParam（字符串值本身）值。我想要的是使用由项目参数传递的参数访问输入“项目值”。我尝试了上面的代码，结果，它实际上访问了“itemParam”字符串值本身，而不是传递参数。在Vue.js中，您应该使用v-model进行双向数据绑定。 v-model 指令是绑定数据以形成输入并更新用户输入数据的便捷简写。但是，它不能直接用作 prop 或作为参数传递。相反，您可以传递整个对象并在方法中使用它。以下是修改代码的方法： <template> <div v-for="(item, idx) in data" :key="idx"> <input :id="item" v-model="item.value"></input> <button @click="submitTest(item)">testbtn</button> </div> </template> <script setup> const data = ref([ { id: 'input1', value: '' }, { id: 'input2', value: '' }, // ... other items ]); function submitTest(item) { alert(item.value); } </script> 在此示例中，数据数组中的每个项目都是一个具有 id 和 value 属性的对象。 v-model 指令绑定到 item.value。当您单击按钮时，将使用整个项目对象调用 SubmitTest 函数，您可以从那里访问 value 属性。确保在设置脚本中使用 ref 创建对数据数组的反应性引用。注意： :key="idx" 添加到中，为循环中的每个项目提供唯一的键。这有助于 Vue.js 在数组更改时高效更新和重新渲染组件。

Vue：带有 v-model 的代理框架组件

我想要代理，它以可以与 Dayjs（我们在整个应用程序中使用）一起使用的方式公开基于日期的 v 模型。我怎样才能实现这个目标？我正在使用最新的 Vu...

VueJS [电子邮件受保护] 组件 v-model 最初不会更新父级

我有一个父子组件设置来测试 v-model。当您输入值时，子级会更新父级，但最初不会。家长：从“vue”导入{ref}；导入文本输入...</desc> <question vote="0"> <p>我有一个父子组件设置来测试 v-model。当您输入值时，子级会更新父级，但最初不会。</p> <p>家长：</p> <pre><code><script setup> import { ref } from 'vue'; import TextInput from './TextInput.vue'; const size = ref(1); const color = ref('red'); </script> <template> <TextInput v-model:size="size" v-model:color.capitalize="color" /> <div :style="{ fontSize: size + 'em', color: color }">  <p>{{ size }} {{ color }}</p> </div> </template> </code></pre> <p>子：TextInput.vue</p> <pre><code><script setup> import { ref } from 'vue'; const size = defineModel('size'); const [color, modifier] = defineModel('color', { set(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; }, //only this forces color to upper case on start in the input get(value) { if(modifier.capitalize) { return value.charAt(0).toUpperCase() + value.slice(1); } return value; } }); </script> <template> <input v-model="size"> <input v-model="color"> </template> </code></pre> <p>问题2：如果我在defineModel中省略“color”（“color”，{...，我会收到以下错误</p> <p>[Vue warn]：无关的非 props 属性（颜色、colorModifiers）被传递给组件但无法自动继承，因为组件渲染片段或文本根节点。</p> <pre><code>at <TextInput size=1 onUpdate:size=fn color="red" ... > at <ComponentVModel> at <App> </code></pre> <p>如果我只保留</p> <pre><code><input v-model="color"> </code></pre> <p>line，为了让它不是片段，根本不更新。</p> </question> <answer tick="false" vote="0"> <p>问题 1：在调用子元素中的 v-model setter 之前，<pre><code><p></code></pre> 元素中的大写不会发生。 <strong>设置器是同步回父级的设置器</strong>。由于在输入接收到来自用户的一些文本之前不会调用设置器，因此父级中的 <pre><code><p></code></pre> 元素将显示初始值，在您的情况下为“红色”。</p> <p>问题 2：defineModel 根据第一个参数字符串“color”声明一个 prop。该道具旨在匹配父级<strong>上的</strong>v模型的参数，即<pre><code>v-model:color</code></pre>。从defineModel中删除“颜色”意味着父v模型必须从<pre><code>v-model:color</code></pre>更改为<pre><code>v-model</code></pre></p> </answer> </body></html>

如何使用 vitest 和 vue-test-utils 测试 Vuetify 3 select？

我在表单中有一个 v-select，我想用 vitest 和 vue-test-utils 进行测试。我在表单中有一个 v-select，我想用 vitest 和 vue-test-utils 进行测试。 <v-select clearable :items="models" item-value="id" item-text="name" ref="model-select" required="true" v-model="selectedModel" ></v-select> 我尝试用我在here找到的两种方法来测试它。带注释的代码是一种方法，未注释的代码是第二种方法。 test('it fills the form', async () => { models = [ { id: '1', name: 'foo', }, { id: '2', name: 'bar', }, ]; await nextTick(); // const select = wrapper?.findComponent({ref: 'model-select'}); // expect(select?.exists()).toBeTruthy(); // select?.vm.selectItem('foo'); // await nextTick(); wrapper?.find('[data-testid="model-select"]').trigger('click'); await nextTick(); wrapper?.find('.menuable__content__active')?.findAll('.v-list-item')?.at(0)?.trigger('click'); await nextTick(); }); 我似乎找不到正确的解决方案，DOM 包装器要么不知道选择项目的方法（第一种方法），要么是空的，因为它找不到 vuetify 选择菜单（第二种方法）有人遇到同样的问题并找到适合我使用的软件包的解决方案吗？我找到了答案。您无法访问底层 html 的值，而是访问组件实例并获取值 import { mount } from '@vue/test-utils' describe('my test', () => { wrapper = mount(MySelect) test('it fills the form', async () => { models = [ { id: '1', name: 'foo' },{ id: '2', name: 'bar',}, ]; const component = wrapper.findComponent('[data-testid="model-select"]') await component.setValue(models[0]) console.log('new value', component.vm.modelValue) }) 我花了几天时间尝试解决同样的错误。我希望我有所帮助。问候！

如何取消点击Primevue的单选按钮？

我正在使用 vue3 和 Primevue 来开发我的应用程序。我想在单击时取消选择 Primevue 的单选按钮。有办法做到吗？这是我的单选按钮代码。我使用 vue3 和 Primevue 来开发我的应用程序。我想在单击时取消选择 Primevue 的单选按钮。有办法做到吗？这是我的单选按钮代码。 <div class="field col-12 md:col-12 lg:col-12"> <template v-for="currency in currencies" :key="currency.id"> <div v-if="v$.currency.$model !== currency.code" class="flex align-items-center mb-2"> <RadioButton v-model="paidInType" :inputId="currency.code" name="payIn" :value="currency.code" /> <label :for="currency.code" class="ml-2">Pay in {{ currency.symbol }}</label> </div> </template> </div> 单选按钮并不意味着不可选择。请针对您的用例使用复选框或切换组件，并根据您的需要重新设计它们。但是如果您确实需要覆盖默认的单选按钮操作，则添加 @click 方法来删除所选值（如果其等于单击的单选按钮值）。从 UI/UX 角度来看，您不应该将单选按钮留空。这就是为什么 PrimeVue 无线电组件没有 required 属性（只是假设需要）。这种行为已经成为几十年来的标准，即必须选择一个单选选项，即使该选项是“不适用”或“不想说”等。如果您确实需要取消选择，请首先考虑使用不同的组件。如果您确实想取消选择单选按钮，您需要做的就是在选择事件时将 v-model 设置回默认的未选择值状态。由于您需要首先确认新选择的值与之前的值相同，因此您需要始终跟踪之前的值。 const paidInType = ref(''); const prevValue = ref(''); function selectRadio(value) { if (prevValue.value === paidInType.value) { paidInType.value = ''; } } <RadioButton v-model="paidInType" @click="prevValue = paidInType" @update:modelValue="selectRadio(currency.code)" :inputId="currency.code" name="payIn" :value="currency.code" /> stackblitz 演示

为什么我的目标激活对话框除了表格的第一行之外没有出现？

我正在使用 Vue 3 和 Vuetify 3。我正在尝试让我当前的应用程序显示中的一行我正在使用 Vue 3 和 Vuetify 3。我试图让我当前的应用程序在其自己的组件中的对话框中显示 <v-data-table 中的一行，但它无法正常工作：将出现对话框如果我单击表第一行的 Actions3 列中的删除图标，但不单击 Actions3 列中的任何其他删除按钮。这个游乐场说明了问题。一点背景信息，这个应用程序的初始版本只有一个删除按钮，即“操作”列中的按钮。它的工作是立即删除表中已按下删除按钮的行。这很有效，但有点危险，因为用户可能没有意识到这是一个删除按钮，并且可能对用它删除一行感到不满意，所以我添加了 Actions2 列，该列也为每行都有一个删除按钮。 Actions2 列中的按钮会显示一个对话框，其中显示该行的内容，并让用户选择确认删除或取消删除。这完全按照设计工作。但我对我使用的方法并不着迷，因为我必须为可组合项编写一个额外的模块来控制对话框的打开和关闭，所以我添加了 Actions3 按钮并编写它，以便它将使用目标激活显示该行内容并提供相同的两个按钮的对话框，一个用于确认删除，另一个用于取消删除。这就是麻烦所在。Actions3 列中的按钮仅显示表格第一行的对话框，因此这是我唯一可以删除的行。我需要为 Actions3 列中的每个删除按钮显示对话框，而不仅仅是第一个。重要提示：所有三列中实际删除行中数据的代码已被删除，因此按对话框中的任何红色垃圾桶或红色删除按钮都是完全安全的；不会丢失任何实际数据。如果我能让所有 Actions3 按钮正常工作，我计划从表中删除 Actions 和 Actions2 列。我希望你能帮忙。更新：我尝试按照莫里茨在评论中建议的方式进行编码，但显然我做错了，因为 ConfirmDelete2 列中的任何按钮都没有出现 Actions3 对话框。这是我修改后的playground，以防有人可以帮助我找出哪里出了问题。我建议使用该项目来触发对话框：激活器仅将 selectedItem 设置为当前项目（我会使用 VBtn 而不是 VIcon）： <v-btn icon="mdi-delete" variant="plain" @click="event => selectedItem = item" /> ConfirmDelete2 以一个 item 作为模型，其余的 props 被删除，因为数据可以直接通过 item 访问： // in ConfirmDelete2 setup type Item = {...} const model = defineModel<Item|null>() 无论何时设置模型，VDialog 都应该出现。由于对话框中使用了项目数据，因此使用 v-if 而不是 :modelValue="Boolean(model)" 可以避免 model is null 错误： <v-dialog v-if="model" :modelValue="true" ... 删除后，取消设置model以关闭模态框： const deleteRecord = () => { ... model.value = null // <--- defineModel emits `update:modelValue` } 现在父级可以简单地使用 v-model 来传递 selectedItem，当对话框关闭时它将被取消设置（由 v-model 更新） <ConfirmDelete2 v-model="selectedItem" /> 这里是更新后的游乐场。希望有帮助！如果有不清楚的地方请告诉我。

如何在 Vuetify.js 中单击附加图标时调用函数？

我需要append-icon="close"来调用@click="clearSearch()" 现在我正在使用一个专用按钮来实现它：我需要 append-icon="close" 打电话给 @click="clearSearch()" 现在我正在使用专用按钮来实现它： <v-text-field v-model="search" class="search" label="search" prepend-icon="search" append-icon="close"> </v-text-field> <v-btn @click="clearSearch()"></v-btn> 我尝试添加append-icon-cb="clearSearch()"但它不起作用，我不知道为什么我也尝试过简单地使用clearable，它会清除输入，但所有元素都保持“过滤”状态。我不知道 clearable 是如何工作的，但我的 clearSearch() 方法只是这样做： clearSearch() {this.search = ""} 并且它有效，这就是为什么我使用自定义 clear input 方法使用 @click:append="clearSearch"，:append-icon-cb 已弃用。（来源）解决了，解决方法如下：为了避免这个问题，您应该使用 : 符号绑定属性： :append-icon-cb="clearSearch" 并且不要放()，否则它将无法工作（正如@Traxo提到的）我认为如果你删除 () 应该可以工作，因为包含 () 后，你立即只需调用一次函数即可。编辑：不要忘记冒号: 所以： :append-icon-cb="clearSearch" 但这发生了变化：对于附加图标，例如 append-icon="mdi-magnify-plus-outline", 你就这样做 @click:append="zoomIn"。但是对于附加外部图标，例如 append-outer-icon="mdi-plus-circle-outline"，` 您必须添加单词“append”，即 @click:append-outer="addMore" 因此，这将适用于 Vue2 <v-text-field solo append-outer-icon="mdi-plus-circle-outline" @click:append-outer="addMore" > </v-text-field> 只需将 :append-icon-cb="() => (e1 = !e1)" 更改为 @click:append="() => (e1 = !e1)" 即可完美运行并删除警告...

Pinia 对象在 Vue 中的 foreach 后失去反应性

我有这个嵌套的foreach BalanceItemList.vue ... 我有这个嵌套的 foreach BalanceItemList.vue <template> <div v-for="category in categoryItemsStore.balanceCategories" :key="category.id" class="mt-5"> <div class="border-black border-b bg-gray-200"> <span class="font-bold w-full">{{ category.name }}</span> </div> <div v-for="balanceItem in category.balance_items" :key="balanceItem.id"> {{ balanceItem.total = 500 }} <balance-item :balance-item="balanceItem" @update-balance-item="update"/> </div> <div> <balance-item-create :category="category.id" @create-balance-item="update"/> </div> <div v-if="categoryItemsStore.totals[category.id]" class="grid grid-cols-4-b t-2 ml-2"> <div :class="category.is_positive ? '': 'text-red-600' " class="col-start-4 border-t-2 border-black font-bold"> €{{ categoryItemsStore.totals[category.id].total }} </div> </div> </div> </template> 我像这样检查了“balanceItem”的反应性 {{ balanceItem.total = 500 }} 它在商店中更新，但随后我有了我的平衡项目组件： BalanceItem.vue <script setup> import {reactive} from "vue"; import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = reactive(props.balanceItem); const form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { props.balanceItem.total = 500 categoryItemStore.updateBalanceItemsTotals(form) emit('update-balance-item') } }) } </script> <template> <form @submit.prevent="submit"> <div class="grid grid-cols-4-b"> <span>{{ item.name }}</span> <NumberInput v-model="form.count" autofocus class=" mr-4 mt-1 block" type="number" @update:model-value="submit" /> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1">€</div> <NumberInput v-model="form.amount" :class="form.errors.amount ? 'border-red-600' : ''" autofocus class="mt-1 mr-4 w-5/6" type="text" @update:model-value="submit" /> </div> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1 w-5/6">€</div> <NumberInput v-model="form.total" autofocus class="mt-1 block" disabled style="max-width: 95%" type="text" /> </div> </div> </form> </template> 这是我测试反应性的商店。如果我增加输入的数字，则项目的计数保持不变 UseCategoryItemsStore.js import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } function updateBalanceItemsTotals(selectedItem) { balanceCategories.value.forEach((category) => { category.balance_items.forEach((item) => { if (item.id === selectedItem.id) { // item.total = item.count * item.amount console.log(item) } }) }) } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, updateBalanceItemsTotals} }) 在此测试中，我执行“props.balanceItem.total = 500”。但如果我检查商店，它不会更新。看来将“balanceItem”分配给一个道具会失去与我的 Pinia 商店的反应性。我可以使用“form.total = form.count * form.amount”手动更新我的表单，但这对我来说似乎很老套，我想使用 Pinia 商店的反应性。我考虑过根据“BalanceItem”获取 Pina 项目，但这似乎也很棘手。谁知道为什么失去反应性？我有laravel 10.39、vue3.2.41和pinia 2.1.17惯性0.6.11。到目前为止我知道的所有最新版本。我像这样更新我的表格和商店： <script setup> import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = categoryItemStore.getItemById(props.balanceItem); let form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { item = categoryItemStore.updateItem(form) form = useForm(item) emit('update-balance-item') } }) } </script> 我将此功能添加到我的商店： import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getItemById(item) { let category = balanceCategories.value.find((category) => { return category.id === item.item_category_id }) return category.balance_items.find((item_from_store) => { return item_from_store.id === item.id }) } function updateItem(form) { const item = getItemById(form) item.count = form.count item.amount = form.amount item.total = item.count * item.amount return item } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, getItemById, updateItem} }) 假设如果帖子获得 200，我的表单值可用于更新商店和更新表单。这是我能想到的最好的

MazPhoneNumberInput Vue.js 上的自动对焦

我在表单中使用 MazPhoneNumberInput 组件（https://maz-ui.com/components/maz-phone-number-input）：我正在以这种方式使用 MazPhoneNumberInput 组件（https://maz-ui.com/components/maz-phone-number-input）： <MazPhoneNumberInput v-model="phoneNumber" v-model:country-code="countryCode" show-code-on-list :preferred-countries="['DE', 'US', 'GB']" noFlags /> 并且想在手机输入上设置自动对焦。 MazPhoneNumberInput 组件本身没有 autofocus 属性，但它基于具有 autofocus 属性的 MazInput 组件（https://maz-ui.com/components/maz-input）：我尝试通过 javascript 使用 onMounted 方法设置焦点： import AppLayout from "@/Layouts/Auth/AppLayout.vue"; import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput' import {ref, onMounted} from 'vue' const phoneNumber = ref() const countryCode = ref('DE') const focusInput = () => { phoneNumber.value.focus(); }; onMounted(focusInput); 但是没有成功。如何在手机输入上设置自动对焦？这可以使用 template ref 来完成，它可以访问组件的 DOM 元素。由于根元素只是多个其他元素的包装，因此需要额外的查询来获取实际的电话输入，然后您可以将其聚焦： onMounted(async () => { const phoneEl = phone.value.$el // MazPhoneNumberInput root DOM element const phoneInput = phoneEl.querySelector('input[type=tel]') // inner input DOM element await nextTick() // can focus after next DOM update phoneInput.focus() })

OSError：在目录中找不到名为 model.safetensors 的文件时出错

我正在尝试加载以 Hugging Face 安全张量格式保存的 LLAMA2 模型。模型保存在两部分 model-part1.safetensors 和 model-part2.safetensors 中。我正在使用 LlamaForCausalLM。

有没有办法在有条件的情况下隐藏v-data-table中的展开按钮？

借助 v-data-table 中的“show-expand”属性，展开按钮会显示在数据表的所有行中。借助 v-data-table 中的“show-expand”属性，展开按钮会显示在数据表的所有行中。 <v-data-table :expanded.sync="expanded1" :headers="headers1" :items="items" show-expand class="elevation-1" > 有没有办法根据 Vuetify 3 中的条件进行渲染？在 Vuetify 2 中，使用 item.data-table-expand 插槽来实现此目的。 <template #item.data-table-expand="{ item, expand, isExpanded }"> <td v-if="item?.versions?.length > 0" class="text-start"> <v-btn variant="text" density="comfortable" @click="expand(!isExpanded)" class="v-data-table__expand-icon" :class="{ 'v-data-table__expand-icon--active': isExpanded }" > <v-icon>mdi-chevron-down</v-icon> </v-btn> </td> </template> 但是，在 Vuetify 3 中使用相同的代码块会返回类型错误： Uncaught TypeError: expand is not a function expand 现在是 toggleExpand 并期望 internalItem 插槽道具 <template #item.data-table-expand="{ item, internalItem, toggleExpand, isExpanded }"> <td v-if="item?.versions?.length > 0" class="text-start"> <v-btn variant="text" density="comfortable" @click="toggleExpand(internalItem)" class="v-data-table__expand-icon" :class="{ 'v-data-table__expand-icon--active': isExpanded }" > <v-icon>mdi-chevron-down</v-icon> </v-btn> </td> </template>

.Net core Web API 将 json/model 值设置为 NULL

我有一个 .Net core Web API，它接受以下 JSON：（RequestModel） { “isSpecimen”：正确， “形式”： { “网络”：{ “abc1...

Vue 3如何获取$children的信息

这是我在 Tabs 组件中使用 VUE 2 的旧代码：创建（）{ this.tabs = this.$children; } 标签： .... 这是我在 Tabs 组件中使用 VUE 2 的旧代码： created() { this.tabs = this.$children; } 标签： <Tabs> <Tab title="tab title"> .... </Tab> <Tab title="tab title"> .... </Tab> </Tabs> VUE 3：如何使用组合 API 获取有关 Tabs 组件中子项的一些信息？获取长度，迭代它们，并创建选项卡标题，...等？有任何想法吗？（使用组合API）这是我现在的 Vue 3 组件。我使用 Provide 来获取子 Tab 组件中的信息。 <template> <div class="tabs"> <div class="tabs-header"> <div v-for="(tab, index) in tabs" :key="index" @click="selectTab(index)" :class="{'tab-selected': index === selectedIndex}" class="tab" > {{ tab.props.title }} </div> </div> <slot></slot> </div> </template> <script lang="ts"> import {defineComponent, reactive, provide, onMounted, onBeforeMount, toRefs, VNode} from "vue"; interface TabProps { title: string; } export default defineComponent({ name: "Tabs", setup(_, {slots}) { const state = reactive({ selectedIndex: 0, tabs: [] as VNode<TabProps>[], count: 0 }); provide("TabsProvider", state); const selectTab = (i: number) => { state.selectedIndex = i; }; onBeforeMount(() => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab"); } }); onMounted(() => { selectTab(0); }); return {...toRefs(state), selectTab}; } }); </script> 选项卡组件： <script lang="ts"> export default defineComponent({ name: "Tab", setup() { const index = ref(0); const isActive = ref(false); const tabs = inject("TabsProvider"); watch( () => tabs.selectedIndex, () => { isActive.value = index.value === tabs.selectedIndex; } ); onBeforeMount(() => { index.value = tabs.count; tabs.count++; isActive.value = index.value === tabs.selectedIndex; }); return {index, isActive}; } }); </script> <template> <div class="tab" v-show="isActive"> <slot></slot> </div> </template> 哦伙计们，我解决了： this.$slots.default().filter(child => child.type.name === 'Tab') 对于想要完整代码的人：标签.vue <template> <div> <div class="tabs"> <ul> <li v-for="tab in tabs" :class="{ 'is-active': tab.isActive }"> <a :href="tab.href" @click="selectTab(tab)">{{ tab.name }}</a> </li> </ul> </div> <div class="tabs-details"> <slot></slot> </div> </div> </template> <script> export default { name: "Tabs", data() { return {tabs: [] }; }, created() { }, methods: { selectTab(selectedTab) { this.tabs.forEach(tab => { tab.isActive = (tab.name == selectedTab.name); }); } } } </script> <style scoped> </style> 标签.vue <template> <div v-show="isActive"><slot></slot></div> </template> <script> export default { name: "Tab", props: { name: { required: true }, selected: { default: false} }, data() { return { isActive: false }; }, computed: { href() { return '#' + this.name.toLowerCase().replace(/ /g, '-'); } }, mounted() { this.isActive = this.selected; }, created() { this.$parent.tabs.push(this); }, } </script> <style scoped> </style> 应用程序.js <template> <Tabs> <Tab :selected="true" :name="'a'"> aa </Tab> <Tab :name="'b'"> bb </Tab> <Tab :name="'c'"> cc </Tab> </Tabs> <template/> 我扫描子元素的解决方案（在对 vue 代码进行大量筛选之后）是这样的。 export function findChildren(parent, matcher) { const found = []; const root = parent.$.subTree; walk(root, child => { if (!matcher || matcher.test(child.$options.name)) { found.push(child); } }); return found; } function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 这将返回子组件。我对此的用途是我有一些通用的对话框处理代码，用于搜索子表单元素组件以咨询其有效性状态。 const found = findChildren(this, /^(OSelect|OInput|OInputitems)$/); const invalid = found.filter(input => !input.checkHtml5Validity()); 如果你复制粘贴与我相同的代码然后只需向“选项卡”组件添加一个创建的方法，该方法将自身添加到其父级的选项卡数组中 created() { this.$parent.tabs.push(this); }, 使用脚本设置语法，您可以使用useSlots：https://vuejs.org/api/sfc-script-setup.html#useslots-useattrs <script setup> import { useSlots, ref, computed } from 'vue'; const props = defineProps({ perPage: { type: Number, required: true, }, }); const slots = useSlots(); const amountToShow = ref(props.perPage); const totalChildrenCount = computed(() => slots.default()[0].children.length); const childrenToShow = computed(() => slots.default()[0].children.slice(0, amountToShow.value)); </script> <template> <component :is="child" v-for="(child, index) in childrenToShow" :key="`show-more-${child.key}-${index}`" ></component> </template> 我对 Ingrid Oberbüchler 的组件做了一个小改进，因为它不支持热重载/动态选项卡。在 Tab.vue 中： onBeforeMount(() => { // ... }) onBeforeUnmount(() => { tabs.count-- }) 在 Tabs.vue 中： const selectTab = // ... // ... watch( () => state.count, () => { if (slots.default) { state.tabs = slots.default().filter((child) => child.type.name === "Tab") } } ) 我也遇到了同样的问题，在做了很多研究并问自己为什么他们删除了$children之后，我发现他们创建了一个更好、更优雅的替代方案。这是关于动态组件的。 (<component: is =" currentTabComponent "> </component>). 我在这里找到的信息： https://v3.vuejs.org/guide/component-basics.html#dynamic-components 希望这对你有用，向大家问好！！我发现这个更新的 Vue3 教程使用 Vue 插槽构建可重用的选项卡组件对于与我相关的解释非常有帮助。它使用 ref、provide 和ject 来替换我遇到同样问题的this.tabs = this.$children;。我一直在遵循我最初发现的构建选项卡组件（Vue2）的教程的早期版本创建您自己的可重用 Vue 选项卡组件。根据 Vue 文档，假设您在 Tabs 组件下有一个默认插槽，您可以直接在模板中访问该插槽的子级，如下所示： // Tabs component <template> <div v-if="$slots && $slots.default && $slots.default()[0]" class="tabs-container"> <button v-for="(tab, index) in getTabs($slots.default()[0].children)" :key="index" :class="{ active: modelValue === index }" @click="$emit('update:model-value', index)" > <span> {{ tab.props.title }} </span> </button> </div> <slot></slot> </template> <script setup> defineProps({ modelValue: Number }) defineEmits(['update:model-value']) const getTabs = tabs => { if (Array.isArray(tabs)) { return tabs.filter(tab => tab.type.name === 'Tab') } else { return [] } </script> <style> ... </style> 并且 Tab 组件可能类似于： // Tab component <template> <div v-show="active"> <slot></slot> </div> </template> <script> export default { name: 'Tab' } </script> <script setup> defineProps({ active: Boolean, title: String }) </script> 实现应类似于以下内容（考虑一组对象，每个部分一个，带有 title 和 component）： ... <tabs v-model="active"> <tab v-for="(section, index) in sections" :key="index" :title="section.title" :active="index === active" > <component :is="section.component" ></component> </app-tab> </app-tabs> ... <script setup> import { ref } from 'vue' const active = ref(0) </script> 另一种方法是使用 useSlots，如 Vue 文档（上面的链接）中所述。在 3.x 中，$children 属性已被删除并且不再受支持。相反，如果您需要访问子组件实例，他们建议使用 $refs。作为数组 https://v3-migration.vuejs.org/writing-changes/children.html#_2-x-syntax 在 3.x 版本中，$children 已被删除且不再受支持。使用 ref 访问子实例。 <script setup> import { ref, onMounted } from 'vue' import ChildComponent from './ChildComponent .vue' const child = ref(null) onMounted(() => { console.log(child.value) // log an instance of <Child /> }) </script> <template> <ChildComponent ref="child" /> </template> 详细信息：https://vuejs.org/guide/essentials/template-refs.html#template-refs 基于@Urkle的回答： /** * walks a node down * @param vnode * @param cb */ export function walk(vnode, cb) { if (!vnode) return; if (vnode.component) { const proxy = vnode.component.proxy; if (proxy) cb(vnode.component.proxy); walk(vnode.component.subTree, cb); } else if (vnode.shapeFlag & 16) { const vnodes = vnode.children; for (let i = 0; i < vnodes.length; i++) { walk(vnodes[i], cb); } } } 除了已接受的答案之外：而不是 this.$root.$children.forEach(component => {}) 写 walk(this.$root, component => {}) 这就是我让它为我工作的方式。

std::remove 是否保留删除的元素，或者它们是否可以被覆盖？

int main() { std::vector v(10, false); v[0] = 真； v[1] = 真； auto end_it = 删除(v.begin(), v.end(), true); 对于 (int i = 0; i < v.size(); ++i) cout << ...

Django UserCreationForm 元字段

我创建了自定义的用户创建表单类RegisterForm（用户创建表单）：类元： model = Users #personal 用户模型字段 = ( “用户名”， ...

编译时递归函数来计算整数的下一个2的幂？

在 Bit Twiddling Hacks 网站上，提供了以下算法来将整数四舍五入到 2 的下一个幂：无符号整型 v； // 计算 32 位 v 的下一个最高的 2 次方 v--； v |=...

同时具有指针类型和常规类型的类模板

我定义了一个 Node 类，其值类型带有模板模板类节点{ T 值；民众：节点 (T & v) : val (v) {} ... 无效打印（）{cout<< v <<...

打印科学格式符号

第一个代码无效求解() { ll n; cin >> n; 向量 v(n); 总和 = 0; ld mx = 0; for(int i = 0; i < n; i++) { cin >> v[i]; } w...

如何决定torchsummary.summary(model=model.policy, input_size=(int, int, int))的'input_size'参数？

这是我的 CNN 网络，由“print(model.policy)”打印： CNN政策( （演员）：演员（ (features_extractor): CustomCNN( (cnn): 顺序( (0): Conv2d(1, 32, kernel_size=(3, 3), st...

使用 Whisper AI 转录时出现打字错误

我想使用 Whisper AI 转录音频文件。我从一篇文章中学到了https://www.assembleai.com/blog/how-to-run-openais-whisper-speech-recognition-model/ 使用 python 版本 3.8....

将多个对象添加到另一个对象

我一直在开发本教程中制作的应用程序版本（https://learn.microsoft.com/pl-pl/aspnet/core/data/ef-rp/complex-data-model?view =aspnetcore-5.0&tabs=visual-studio）。我有

我在 python 3 中通过 pip install 下载的库中存在问题

导入pytube pytube.YouTube('https://www.youtube.com/watch?v=qxhMUbpm_XI').streams.first().download() yt = pytube.YouTube('https://www.youtube.com/watch?v=qxhMUbpm_XI') yt.streams ....过滤器（程序...

Autodesk Model Derivative API：使用 exportSettingsName 选项将 Revit 转换为 IFC 不会在 2023 文件中创建 PSET

我正在使用模型衍生 API 将 Revit 文件 (.rvt) 转换为 IFC (.ifc) 文件。我正在设置属性，如

如何在 bash 中修剪文件中的前 n 个字符和最后 m 个字符

我有一个文件，内容如下：输入.txt 导出 k=“v” v 可能包含诸如目标是存储 v （在名为 oputput.txt 的文件中不带双引号）例如，我...

在 Rails 中运行测试时出现运行时错误

版本： > 红宝石-v ruby 3.3.6（2024-11-05 修订版 75015d4c1f）[arm64-darwin24] > 导轨-v 导轨8.0.0.1 user.rb模型：用户类 < ApplicationRecord devise :database_authenticatable, :

TKinter - 文件上传按钮，更改按钮颜色

我有 TKinter 和 CustomTkinter 的代码来创建文件上传按钮： def import_file_data(): v = tk.StringVar() 全局文件数据 csv_file_path = Askopen文件名() v.设置(

Laravel 动态扩展或使用 Traits

可以在运行时扩展或使用不同的类吗？例子：假设我们有一个名为 Player 的模型（我们的 A 模型）可以在运行时扩展或使用不同的类吗？示例：假设我们有一个 model 称为 Player（我们的 A 模型） <?php namespace App\Models; use Illuminate\Database\Eloquent\Model; class Player extends Model{ } 我们还有另外 2 个型号（B 和 C 型号） <?php namespace App\Models; use Illuminate\Database\Eloquent\Model; protected $connection= 'db_b'; class PlayerInfoB extends Model{ function getName(){ return $this->name; } } 我们的C型号 <?php namespace App\Models; use Illuminate\Database\Eloquent\Model; protected $connection= 'db_c'; class PlayerInfoC extends Model{ function getName(){ return $this->name_g; } } 模型A (Player)如何在运行时根据配置或其他数据扩展Model B or C 为什么我需要这个。我有 2 个或更多不同的表，这些表的列有不同的名称，例如： Table 1 - name Table 2 - name_g Table 3 - name_full 所以我需要一个可以随时调用的包装器getName()，而无需检查现在使用的表。 $player = Player::get(); echo $player->getName(); 如果有不清楚的地方，请评论，我会更新我的问题。更新基于madalin-ivascu答案可以这样完成吗？ class Player extends Model{ protected $model; public function __construct(){ $this->setModel(); parent::__construct(); } protected function setModel(){ $this->model = $this->column_model_name } function getAttributeName(){ return $this->model->getName(); } } 如果不使用 eval 或 dirty hacks，就不可能在运行时编写一个类。您必须重新考虑您的类设计，因为您不太可能需要通过良好的设计来做到这一点。您可以做的是使用方法 setTable 和 on: 在运行时更改模型实例上的表和数据库连接 Player::on('db_b')->setTable('player_info_b')->find($id); 另一种方法（首选）是定义模型 PlayerInfoC 和 PlayerInfoB 来扩展您的 Player 模型，然后根据您的情况在需要时实例化类 B 或 C。在您的代码中，您的脚本必须具有您检查的状态，以便知道何时使用正确的模型？既然如此，为什么不在 get name 中使用参数呢？ class Player extends Model{ function getName($field){ return isset($this->{$field}) ? $this->{$field} : null; } } 如果你经常这样做，那么使用魔法方法： class Player extends Model{ function __get($key){ return isset($this->{$field}) ? $this->{$field} : null; } } ... echo $myModelInstance->{$field}; http://php.net/manual/en/language.oop5.overloading.php#object.get 在 Laravel 中，当你通过集合方法拉回数据时，它无论如何都会执行这个神奇的方法，因为所有属性都存储在称为属性的嵌套对象中，因此 __set() 和 __get() 看起来像这样： function __get($key){ return isset($this->attributes->{$key}) ? $this->attributes->{$key} : null; } function __set($key, $value){ return $this->attributes->{$key} = $value; } 建议后者带有属性子集，这样可以防止数据与返回的数据库列名称与模型中已使用的名称发生冲突。这样，您只需在创建的每个模型中将一个属性名称作为保留名称进行管理，而不必担心您使用的数百个 var 名称会覆盖模型或模型扩展中的另一个属性名称。使用该模型值来调用函数 $player = Player::get(); echo Player::getName($player->id,'PlayerInfoC'); 在 Player 模型中您只需调用 public static function getName($id,$class) return $class::where('player_id',$id)->getName();//each class will have the function } ps：您需要进行一些验证来测试该名称是否存在另一种选择是在模型之间创建关系您可以在模型中使用与以下相同的启动方法来执行此操作： protected static function booted() { if (<--your condition-- >) { $traitInitializers[static::class][] = 'boot' . ExampleTrait::class; $traitInitializers[static::class][] = 'boot' . Organizations::class; } }

带斜杠的边框半径在 React-pdf 中不起作用

我知道我们可以在CSS中为半圆设置border-radius: 4px/2px。但它在 React pdf 中不起作用。我尝试过这些。我知道我们可以在CSS中为半圆设置border-radius: 4px/2px。但它在 React pdf 中不起作用。我尝试过这些。你好我导入了所有 React pdf 元素。但是当我尝试上述设计时，我在控制台中收到错误。错误是 @react-pdf_renderer.js?v=e8b1cced:113701 Error: unsupported number: NaN at number2 (@react-pdf_renderer.js?v=e8b1cced:58798:11) at PDFDocument2.lineTo (@react-pdf_renderer.js?v=e8b1cced:59998:28) at clipNode2 (@react-pdf_renderer.js?v=e8b1cced:32924:7) at renderBackground3 (@react-pdf_renderer.js?v=e8b1cced:34087:5) at renderNode3 (@react-pdf_renderer.js?v=e8b1cced:34139:3) at renderChild2 (@react-pdf_renderer.js?v=e8b1cced:34123:12) at Array.forEach (<anonymous>) at renderChildren2 (@react-pdf_renderer.js?v=e8b1cced:34125:12) at renderNode3 (@react-pdf_renderer.js?v=e8b1cced:34145:5) at renderChild2 (@react-pdf_renderer.js?v=e8b1cced:34123:12) 有人可以帮忙吗测试此类语法的最简单方法是在 repl 中https://react-pdf.org/repl 简短的回答是 4px/2 不是单个 px 值，因此 = NAN 使用任何其他单个愚蠢的数字即可。

无法为版本化模型创建捆绑包文件夹？

我收到了其他开发商的项目。然后我在 Xcode 中打开 iOS 项目并构建它，我收到如下错误：卷/Macintosh D/我的工作区/HCProject/Model/HealthCareModel.xcdatamodeld:0: 错误...

删除内部网格细节，同时保留顶点颜色

我有一个包含顶点颜色的.obj，例如： v -48.125000 47.082489 19.500006 229 229 229 v -46.875000 47.082489 19.500006 229 229 229 我想使用类似的技术来...

如何禁用 HTML 输入中的第一个空格？

考虑一个带有文本输入的简单 Vue 组件（链接）。从 'vue' 导入 { ref } const 消息 = ref('') 函数 onInput(e) { 让 value = e.target.value; 如果（值===''）...</desc> <question vote="0"> <p>考虑一个带有文本输入的简单 Vue 组件（<a href="https://play.vuejs.org/#eNp9kc1uwjAQhF9l5YtBQuHQnmhS9Ucc6KGt2h59icImNXVsyz8UCeXdu3aAckDc4plv4xnvnj1aW2wjsgUrfeOkDeAxRHsvtOytcQH24LCFAVpneuCEcqGFboz2AXrfQZX8CefTJLdRN0EaDUavtI1hglPYCw2gMMC2VhGJxyLUrsNQZOEu2bKFycGuKuDApyea80zQVSNP0nFuELqcj6kpLx0C9lbVAekEUMqUABaZrgSjPwgGD1ml4yEhSXPCy/nZLJux4KlhK7ti442mx8klBGtMb6VC92ZTSy/YYqyXvFop8/uSteAizo56843NzwV943dJE+zdoUe3RcFO3vhAo738fMUdfZ/M3qyjIvqK+YHeqJgyjthT1GuKfcbltKu8Yqm7L7/cBdT+WCoFTeSQecFo7c9Xqv/HvSlu8xwthw1/RIzIQw==" rel="nofollow noreferrer">链接</a>）。</p> <pre><code><script setup> import { ref } from 'vue' const msg = ref('') function onInput(e) { let value = e.target.value; if (value === ' ') value = ''; msg.value = value; } </script> <template> <input :value="msg" @input="onInput" /> </template> </code></pre> <p>我想禁用此输入中的第一个空格，即如果用户输入空格，则输入字段应保持为空。但这不起作用。我猜这是因为 Vue 检查 <pre><code>msg</code></pre> 没有改变并拒绝组件渲染。</p> <p>我的下一个尝试是强制渲染组件（<a href="https://play.vuejs.org/#eNp9UstOwkAU/ZWbiUkhMWWhKwRRCQtcqPGxm01TbnGwnZnMA2tI/9070xYwGDZN5zxuzz2dHbvXOt16ZGM2sbkR2oFF5/Utl6LSyjjYrdHNvTEo3VJal8kcGyiMqiAhX3LQgcEC/lJc5oo8UNk1TAM/SJLhARbdPOJOPzIY3gRl4WXuhJKg5FJq7wY4hB2XACU62GalD25MXWZoRBoB8gGIAgYdPZ1CAklng70pSaIQQrrWSGA7IKAt10ecpdqo+meWXhTK5PihV5lrIwaVocqMjIcmPE4ncknEZNRWTOXSwWGlS5pCJ4CJCMvBOKqnnNEEzuAuonTslidoRPLJ6MjLLpmz1Gch1unGKkl/Mi7KWa4qLUo0zzoUaDkb9xVwlpWl+n6MmDMeL3s8/8T86x98Y+uAcfZi0KLZImd7ru2+pRdvT1jT+56s1MqXpD5DvqJVpQ8ZW9mDlyuKfaSLaZfxngm5freL2qG0/VIhaKw+6jmjuzc/s/oh7lV63f2yhjW/2ToDyQ==" rel="nofollow noreferrer">链接</a>）。</p> <pre><code><script setup> import {getCurrentInstance} from 'vue' import { ref } from 'vue' const msg = ref('') const instance = getCurrentInstance(); function onInput(e) { let value = e.target.value; if (value === ' ') { value = ''; msg.value = value; instance?.proxy?.$forceUpdate(); return; } msg.value = value; } </script> <template> <input :value="msg" @input="onInput" /> </template> </code></pre> <p>它有效，但有限制。我的项目有一个大的组件树，并且 <pre><code>$forceUpdate</code></pre> 仅更新当前组件，没有子组件。</p> <p>我还尝试通过更改组件上的 <pre><code>key</code></pre> 来重新渲染整个子三个，但在这种情况下我失去了输入的焦点。</p> <p>总而言之，我似乎错过了什么。我不敢相信这么简单的任务需要奇怪的解决方法。请帮助我找到一种简单且“最佳实践”的方法来禁用 html 输入中的第一个空格。</p> </question> <answer tick="false" vote="0"> <p>您应该使用正则表达式从字符串中删除第一个空白字符。</p> <p></p><div data-babel-preset-ts="false" data-lang="js" data-hide="false" data-console="true" data-babel="false" data-babel-preset-react="false"> <div> <pre><code> const { createApp, ref } = Vue; createApp({ setup() { const inputValue = ref(''); const removeFirstSpace = () => { // 使用正则表达式去除第一个空格 inputValue.value = inputValue.value.replace(/^\s/, ''); }; return { inputValue, removeFirstSpace }; } }).mount('#app');</code></pre> <pre><code><!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue 3 Input 示例</title> <script src="https://unpkg.com/vue@3"></script> <style> body { font-family: Arial, sans-serif; margin: 20px; } </style> </head> <body> <div id="app"> <h1>输入示例</h1> <input type="text" v-model="inputValue" @blur="removeFirstSpace" placeholder="输入一些内容"> <p>你输入的内容是: {{ inputValue }}</p> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>

视觉模式 neovim 中的 Autocmd 用于将选择同步到 X11 缓冲区

我希望在视觉模式下选择的任何内容都进入 X11 缓冲区。我理想的工作流程是这样的：我通过按 v （或 V 或 ctrl V 等）进入视觉模式选择我们一些人的一些文字...

docker 如何识别 run -v 选项是指主机目录还是 docker 卷？

当使用选项 -v a:b 执行 docker run 时，a 可以指主机上的目录，也可以指 docker 卷名称。 docker如何识别是哪一个？

如何使用VObject操作VCF触点？

假设我已经构建了一个名为 vobj 的 VObject（例如，通过 vobject.readComponents(vcfStr) 构建）并想向其添加一个新的键：值对： print('k=%s v=%s' % (k,v)) 尝试： stmnt1 = "vobj.ad...

Vuetify 3 V-Stepper 插槽接头

在 vuetify 3 中创建 v-stepper 本质上有两种方法。您可以使用属性或模板/槽。我无法使用属性方法，因为由于某种原因，转换很混乱......

Vue.js 风格的 v-html 和范围内的 css

如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式？简单的例子：组件.vue 如何使用 vue-loader 使用范围内的 css 设置 v-html 内容的样式？简单的例子：组件.vue <template> <div class="icon" v-html="icon"></icon> </template> <script> export default { data () { return {icon: '<svg>...</svg>'} } } </script> <style scoped> .icon svg { fill: red; } </style> 生成html <div data-v-9b8ff292="" class="icon"><svg>...</svg></div> 生成CSS .info svg[data-v-9b8ff292] { fill: red; } 如您所见，v-html 内容没有 data-v 属性，但生成的 css 对于 svg 具有 data-v 属性。我知道这是 vue-loader 的预期行为（https://github.com/vuejs/vue-loader/issues/359）。在本期中提到了后代选择器。但正如你所看到的，我在我的 css 中使用了它，但它不起作用。如何设置 v-html 内容的样式？我正在使用vue-loader 15.9.1。 >>>解决方案对我不起作用（没有效果），而/deep/方法导致构建错误...... 这是有效的： .foo ::v-deep .bar { color: red; } 正如我在这里的回答所述：新版本的vue-loader（从版本12.2.0开始）允许您使用“深层范围”CSS。你需要这样使用它： <style scoped>现在支持可以影响子级的“深度”选择器使用 >>> 组合器的组件： .foo >>> .bar { color: red; } 将被编译为： .foo[data-v-xxxxxxx] .bar { color: red; } 更多信息请参见vue-loader的发布页面将 /deep/ 选择器与 SCSS 一起使用对我来说不起作用，但后来我尝试使用 ::v-deep 选择器例如 ::v-deep a { color: red; } 参见这个答案 AS Sarumanatee 说，如果接受的答案不起作用，请尝试： .foo /deep/ .bar { color: red; } 使用:deep {} 根据您的情况，您应该这样做： <template> <div class="icon" v-html="icon"></div> </template> <style scoped> .icon { :deep { svg { fill: red; } } } </style>

v-on 的 .native 修饰符仅在组件上有效，但它用于 <a> 标签

我正在进行 Vue3 迁移，我不确定如何解决这个特定问题，它在 Vue2 上运行良好。错误：[Vue warn]“v-on 的 .native 修饰符仅在 comp 上有效...

ReSharper 单元测试协方差未显示覆盖范围

在 Visual Studio 2019 v.16.11.10 中使用 ReSharper v.2021.3.3 运行 ReSharper 单元测试覆盖率时，文件的覆盖率不会显示/运行。在图像上，单元测试覆盖率的片段是

为什么pyright严格模式不将没有“items()”的“for k, v in dict”标记为错误？

我在test.py中有以下代码： my_dict = {“a”：1，“b”：3} 对于 my_dict 中的 k、v：打印（k）打印（五）当我运行 Pyright pytest.py 时，这不会被标记为错误，甚至

我无法将代码上传到我的esp8266（arduino ide V.2.1.0，windows 11）

我使用的是 Windows 11 和 arduino ide V.2.1.0 我想对我的 ESP 8266 bt 进行 cade 。 RAM 中的变量和常量（全局、静态），使用 28008 / 80192 字节 (34%) ║ 段字节描述 ╠══数据

耶拿有没有办法看到OntClass来自导入的本体？

我有一个导入 bfo 的本体。在我的测试用例中，我只有一个类，它是实体的子类：我有一个导入bfo的本体。在我的测试用例中，我只有一个类，它是 entity: 的子类 <rdf:RDF xmlns="http://my.ontology/ontologyTest#" xml:base="http://my.ontology/ontologyTest" xmlns:da="http://my.ontology/ontologyTest#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:obo="http://purl.obolibrary.org/obo/" xmlns:owl="http://www.w3.org/2002/07/owl#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xml="http://www.w3.org/XML/1998/namespace" xmlns:xsd="http://www.w3.org/2001/XMLSchema#" xmlns:foaf="http://xmlns.com/foaf/0.1/" xmlns:rdfs="http://www.w3.org/2000/01/rdf-schema#" xmlns:skos="http://www.w3.org/2004/02/skos/core#" xmlns:terms="http://purl.org/dc/terms/"> <owl:Ontology rdf:about="http://my.ontology/ontologyTest"> <owl:imports rdf:resource="http://purl.obolibrary.org/obo/bfo/2019-08-26/bfo.owl"/> </owl:Ontology> <owl:Class rdf:about="http://my.ontology/ontologyTest#Event"> <rdfs:subClassOf rdf:resource="http://purl.obolibrary.org/obo/BFO_0000001"/> </owl:Class> </rdf:RDF> 当我打开本体时，我正在做： OntModel model = createModel("OWL_MEM"); FileManager.get().readModel(model, uri.toString()); Model _model = model.getRawModel(); model = new OntModelImpl(OntModelSpec.OWL_MEM, _model); ExtendedIterator classes = model.listClasses(); while (classes.hasNext()) { OntClass theOwlClass = (OntClass) classes.next(); if (thisClass.getNameSpace() == null && thisClass.getLocalName() == null) { continue; } ... } 我从我的本体中获取所有类（这里是Event），也从导入的本体中获取。 Jena 有没有办法知道 OntClass 是来自导入的本体并且未在我当前的本体中声明？正如 UninformedUser 的评论中所说，感谢他，您可以执行以下操作：列出所有导入本体的URI model.listImportedOntologyURIs() 列出导入本体的所有类model.getImportedModel(uri).listClasses() 在模型的所有类上创建一个迭代器，删除所有导入的类model.listClasses().filterDrop(importedClasses::contains) 因此，要打印模型的所有类而无需导入类： import java.util.HashSet; import java.util.Set; import org.apache.jena.ontology.OntClass; import org.apache.jena.ontology.OntModel; import org.apache.jena.ontology.OntModelSpec; import org.apache.jena.rdf.model.ModelFactory; import org.apache.jena.util.iterator.ExtendedIterator; OntModel model = ModelFactory.createOntologyModel(OntModelSpec.OWL_DL_MEM); model.read("file:///Users/von/tools/data.owl", "RDF/XML"); Set<OntClass> importedClasses = new HashSet<>(); for (String uri : model.listImportedOntologyURIs()) { importedClasses.addAll(model.getImportedModel(uri).listClasses().toSet()); } ExtendedIterator<OntClass> it = model.listClasses().filterDrop(importedClasses::contains); while (it.hasNext()) { OntClass cls = it.next(); System.out.println(cls); }

“ffmpeg -filters”命令输出中的 A->A 和 VV->V 等是什么意思？

我看到这个：过滤器： T.. = 时间线支持 .S. = 切片螺纹 ..C = 命令支持 A = 音频输入/输出 V = 视频输入/输出 N = 输入/输出的动态数量和/或类型...

尝试编写一个示例来证明 Golang 规范中的规则

可分配性如果满足以下条件之一，则 V 类型的值 x 可分配给 T 类型的变量（“x 可分配给 T”）： V 和 T 具有相同的基础类型，但是...

尝试访问 vuetify 中 v-select (itemProps) 的嵌套 json 值

我正在尝试在 vuetify 中制作一个 v-select 组件，它从 API 获取数据并将其显示为选项，但奇怪的是收到的 json 数据在对象内部有一个对象，但它不能...

[已解决]UNIX TCSH sed 命令，如何将每个标志分隔成换行符？ [已关闭]

所以我在给定输入的情况下遇到了这个问题， -vivoe asdkasvoieshdhas -eavwodugfud -e sadiafwin adjiajdj 我想要这样的输出， -v -我 -v -o -easdkasvoieshdhas -埃夫沃杜格福德 -esadiafwin 阿佳...

Python 程序中将罗马数字转换为整数时出错

def romanToInt(self, s: str) -> int: 数量 = 0 lst = ["I","V","X","L","C","D","M"] dict = {“我&quo...

NJsonSchema v.11 破坏了 JsonSchemaGeneratorSettings

在 NJsonSchema 10.9 中，我曾经用 C# 创建模式生成器，如下所示：私有静态 JsonSchemaGenerator MakeGenerator() { JsonSchemaGeneratorSettings 设置 = new() {

如何利用v-data-table中的item-class来增加字体大小？

我对 VueJs 比较陌生，并尝试将我的 v-data-table 项目（Vuetify 2）中的字体大小更新为 20px。在这样做的过程中，我遇到了物品等级。这种方法对 chang 来说是成功的...

打字稿中像 SomeType<T, U, V> 这样的类型是什么意思？

我正在使用 d3 和 typescript，d3 中有很多类型类似于 SomeType。例子：合并（其他：选择）：选择我正在使用 d3 和 typescript，d3 中有很多类型都是这样的 SomeType<U,T,V>。示例： merge(other: Selection<GElement, Datum, PElement, PDatum>): Selection<GElement, Datum, PElement, PDatum> 我查看了高级类型文档，但无法理解这些类型的含义。我不能说它们是否是具有这些子类型或其他类型的选择类型。这些都是泛型。简而言之，它们让您参数化类型，从而允许您将其他类型传递给它。因此，要使用您的示例，您可以执行以下操作： interface SomeType<T, U, V> { t: T u: U v: V } const foo: SomeType<string, number, { cool: boolean }> = { // T U V t: 'a string', u: 123, v: { cool: true } } 游乐场这里有很多关于泛型的文档：https://www.typescriptlang.org/docs/handbook/generics.html 我不确定打字稿，但至少在其他一些语言（例如 C#）上，T 类型是通用类型参数，基本上这意味着您不需要指定具体的对象类型。

Vue.js v-for 不渲染图像

我正在尝试使用 v-for 渲染四个图像，范围为 1 到 4。 v-for="n in 4" :key"n" 但是，使用 'n' 作为 src 的一部分不起作用。为什么？我正在尝试使用 v-for 渲染四个图像，范围为 1 到 4。 v-for="n in 4" :key"n" 但是，使用 'n' 作为 src 的一部分不起作用。为什么？ <div v-for="n in 4" :key="n"> <img :src="`../assets/images/image-product-${n}-thumbnail.jpg`" class="rounded-xl h-16 w-16 hover:cursor-pointer" /> </div> 尝试使用“key”代替“n”，将“n”转换为字符串...没有成功如果我像这样硬编码，它会起作用 <img src="../assets/images/image-product-1-thumbnail.jpg" class="rounded-xl h-16 w-16 hover:cursor-pointer" /> 如果您有可用的全局别名（@），我建议您使用它。因为使用相对路径可以在本地工作，但是当项目编译（构建）时，相关路径可能会被破坏。使用动态 src 路径时，您可以在加载之前需要它。使用别名，您可以执行以下操作： :src="`require(@/assets/images/image-product-${n}-thumbnail.jpg`)"

v-model 相关问题

最新问题