这是我在 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 => {}) 这就是我让它为我工作的方式。
正如标题所说,我有一个像这样的react FC: const 测试 = (道具: { 孩子:React.ReactElement<{ slot: "content" }> }) => { 返回<> } 现在,通过...
Svelte slot 的功能是否像 vanilla-js/dom 一样(我似乎无法让它工作)。 在 html/js 中我可以这样做: 身体{颜色:红色;} /* 从外部设置暴露部分的样式 */ ...</desc> <question vote="0"> <p>Svelte <pre><code>slot</code></pre>的功能是否像 vanilla-js/dom 一样(我似乎无法让它工作)。</p> <p>在 html/js 中我可以做:</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><style> body {color: red;} /* style exposed part from outside */ my-element::part(header) {color: green;} </style> <h1>Hello World</h1> <my-element> <div slot="header"><strong>Header</strong></div> <div slot="body">Body</div> </my-element> <script> customElements.define('my-element', class extends HTMLElement { constructor() { super(); const shadowRoot = this.attachShadow({mode: 'open'}); shadowRoot.innerHTML = ` <style> .container { border: solid 1px blue; padding: 5px; position: relative; &:after { content: "my-element"; display: block; position: absolute; bottom: -.5em; right: 5px; border: inherit; background-color: white; padding: inherit; } } /* style inserted/slotted part from inside */ [part="body"] ::slotted(div) { background-color: lightyellow; } </style> <div class="container"> <header part="header"><slot name="header"></slot></header> <hr> <div part="body"><slot name="body"></slot></div> </div> `; } }); </script></code></pre> </div> </div> <p></p> <p>其中 <pre><code>h1</code></pre> 的全局样式为红色,标有 <pre><code>part="header"</code></pre> 的元素从外部设置为绿色,插入 <pre><code>slot="body"</code></pre> 的内容从内部(shadow dom)设置为绿色有浅黄色背景。</p> <p>我不知道如何在 svelte 中执行任何这种(受控)跨界样式? (例如,当使用 <pre><code>AppShell::part(content)</code></pre> 时,我收到错误:</p> <pre><code>[plugin:vite-plugin-svelte] C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 Expected a valid CSS identifier C:/srv/svelte/yoda5/src/routes/+layout.svelte:23:18 21 | 22 | <style> 23 | AppShell::part(content) { | ^ </code></pre> </question> <answer tick="false" vote="0"> <p>这里有关于<a href="https://learn.svelte.dev/tutorial/slots" rel="nofollow noreferrer">老虎机的课程</a>。最好参考该工具的文档。 Svelte 的学习网站非常棒。</p> <pre><code>// Slotted component, say Test.svelte. <div class="private-parent"> <slot /> </div> <style> div.private-parent { color: blue; } </style> </code></pre> <p>然后,您使用该组件:</p> <pre><code><script> import Test from './Test.svelte'; </script> <Test> <!-- This is the slot's content --> <p class="outside-style">Hello!</p> </Test> <style> p.outside-style { color: darkred; } </style> </code></pre> </answer> </body></html>
有没有办法在有条件的情况下隐藏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>
我正在使用 Ionmic 7 和 React 18。我有一个可以检查或编辑的简单项目列表。 选择商品 我正在使用 Ionmic 7 和 React 18。我有一个可以检查或编辑的简单项目列表。 <IonList> <IonLabel> <strong>Select Items</strong> </IonLabel> {items.map((item) => ( <IonItem key={item}> <IonCheckbox slot="start" name="selectedItems" value={item} /> <IonLabel>{item}</IonLabel> <IonIcon icon={pencilOutline} slot="end" onClick={onEditHandler(item)} style={{ marginLeft: '10px' }} /> </IonItem> ))} </IonList> 问题是当我单击“编辑”图标(铅笔)时,复选框被选中,并且我的编辑处理程序未被调用。演示在这里 - https://stackblitz.com/edit/an5yjh-i9tnnh?file=src%2FApp.tsx,src%2Fcomponents%2FFormWithChceckboxes.tsx。我想将其添加到处理程序中 e.stopPropagation(); 会阻止选中复选框,并且该过程可以继续,但显然不是。 您可以通过向编辑图标添加 z 索引以将其放置在 IonItem 上方来解决该问题,如下所示: <IonIcon icon={pencilOutline} slot="end" onClick={onEditHandler(item)} style={{ marginLeft: '10px', zIndex:10 }} /> 我建议您使用语法正确的 HTML,通过使用 button 来触发操作 😉 <IonButton fill="clear" onClick={() => onEditHandler(item)}> <IonIcon slot="icon-only" icon={pencilOutline}></IonIcon> </IonButton> 这样你就不需要与冒泡效果作斗争了。 https://stackblitz.com/edit/an5yjh-b5wpv5?file=src%2Fcomponents%2FFormWithChceckboxes.tsx
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 << ...
在 Bit Twiddling Hacks 网站上,提供了以下算法来将整数四舍五入到 2 的下一个幂: 无符号整型 v; // 计算 32 位 v 的下一个最高的 2 次方 v--; v |=...
我定义了一个 Node 类,其值类型带有模板 模板 类节点{ T 值; 民众: 节点 (T & v) : val (v) {} ... 无效打印(){cout<< v <<...
我在 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 ....过滤器(程序...
如何在 bash 中修剪文件中的前 n 个字符和最后 m 个字符
我有一个文件,内容如下: 输入.txt 导出 k=“v” v 可能包含诸如 目标是存储 v (在名为 oputput.txt 的文件中不带双引号) 例如,我...
我有 TKinter 和 CustomTkinter 的代码来创建文件上传按钮: def import_file_data(): v = tk.StringVar() 全局文件数据 csv_file_path = Askopen文件名() v.设置(
我知道我们可以在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 使用任何其他单个愚蠢的数字即可。
我有一个包含顶点颜色的.obj,例如: v -48.125000 47.082489 19.500006 229 229 229 v -46.875000 47.082489 19.500006 229 229 229 我想使用类似的技术来...
视觉模式 neovim 中的 Autocmd 用于将选择同步到 X11 缓冲区
我希望在视觉模式下选择的任何内容都进入 X11 缓冲区。我理想的工作流程是这样的: 我通过按 v (或 V 或 ctrl V 等)进入视觉模式 选择我们一些人的一些文字...
docker 如何识别 run -v 选项是指主机目录还是 docker 卷?
当使用选项 -v a:b 执行 docker run 时,a 可以指主机上的目录,也可以指 docker 卷名称。 docker如何识别是哪一个?
假设我已经构建了一个名为 vobj 的 VObject(例如,通过 vobject.readComponents(vcfStr) 构建)并想向其添加一个新的键:值对: print('k=%s v=%s' % (k,v)) 尝试: stmnt1 = "vobj.ad...
在 vuetify 3 中创建 v-stepper 本质上有两种方法。您可以使用属性或模板/槽。 我无法使用属性方法,因为由于某种原因,转换很混乱......
如何使用 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 上有效...
在 Visual Studio 2019 v.16.11.10 中使用 ReSharper v.2021.3.3 运行 ReSharper 单元测试覆盖率时,文件的覆盖率不会显示/运行。 在图像上,单元测试覆盖率的片段是
“ffmpeg -filters”命令输出中的 A->A 和 VV->V 等是什么意思?
我看到这个: 过滤器: T.. = 时间线支持 .S. = 切片螺纹 ..C = 命令支持 A = 音频输入/输出 V = 视频输入/输出 N = 输入/输出的动态数量和/或类型...
尝试访问 vuetify 中 v-select (itemProps) 的嵌套 json 值
我正在尝试在 vuetify 中制作一个 v-select 组件,它从 API 获取数据并将其显示为选项,但奇怪的是收到的 json 数据在对象内部有一个对象,但它不能...
[已解决]UNIX TCSH sed 命令,如何将每个标志分隔成换行符? [已关闭]
所以我在给定输入的情况下遇到了这个问题, -vivoe asdkasvoieshdhas -eavwodugfud -e sadiafwin adjiajdj 我想要这样的输出, -v -我 -v -o -easdkasvoieshdhas -埃夫沃杜格福德 -esadiafwin 阿佳...
我想要代理,它以可以与 Dayjs(我们在整个应用程序中使用)一起使用的方式公开基于日期的 v 模型。我怎样才能实现这个目标?我正在使用最新的 Vu...
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 类型是通用类型参数,基本上这意味着您不需要指定具体的对象类型。
我想使用参数访问 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 在数组更改时高效更新和重新渲染组件。
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 }"> <!-- Question 1: this line shows "red" but "Red" is what I want initially --> <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>
我正在尝试使用 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`)"
我看到了这样的 getopts 用法: while getopts ":hv-:" optchar;做 ... 完毕 最后一个 - 有什么用,它和 v 选项有什么关系?
我想可视化具有不同参数的对数正态概率分布。 我有以下参数的 data.frame: 结构(列表(国家= c(“v1”,“v2”,“v...
Oracle Apex 动态操作中的客户端 JavaScript 表达式
我是 JavaScript 新手,我想将客户端条件编写为 JavaScript 表达式,其中包含 IF GLOBAL_ATTRIBUTE_CHAR21 中包含“B”或“-”。和 GLOBAL_ATTRIBUTE_NUMBER14 =“V...
创建表x ( 名称 varchar(20), 电子邮件 varchar(20), 订单 ID 整数 ); 插入 x 值('拉胡尔卡达','[email protected]',123), ('Raj V', '[email protected]', 23), ('RV', 'z@
Valgrind:仅对于较大的输入值,地址 0x0 不会被堆栈、分配或(最近)释放
我正在尝试实现 Dijikstra,这是我拥有的图形生成代码 #包括 #包括 #包括 #包括 我正在尝试实现 Dijikstra,这是我拥有的图形生成代码 #include <stdlib.h> #include <stdio.h> #include <limits.h> #include <math.h> #define MAX 300 int main (int argc, char *argv[]){ int v = atoi(argv[1]); int SIZE = v*v; int* adjMatrix = malloc(sizeof(int)* SIZE); graphGeneration(adjMatrix, v); free(adjMatrix); return 0; } void graphGeneration(int* adj, int numV){ int i, j, r; for(i = 0; i< numV; i++){ for(j=0; j < numV; j++){ if(i == j){ adj[i * numV + j] = 0; } else{ r = rand() % MAX; adj[i * numV + j] = r; adj[j * numV + i] = r; } } } } 当我尝试输入 1000 的 v 值时,它似乎工作正常,但是当我尝试输入 v = 10,000+ 的值时,我遇到了段错误(特别是我注意到的数字是 50,000)。运行 valgrind 会导致我在该方法的标题中出现错误。 为了方便起见,重新发布在这里: Invalid write of size 4 at 0x400800: graphGeneration by 0x4006E3: main Address 0x0 is not stack'd, malloc'd or (recently) free'd Access not within mapped region at address 0x0 有人对如何调试这个有任何想法或者这里是否有任何明显的错误? 我也在 valgrind 中注意到了这一点 Warning: silly arg (-7179869184) to malloc() 我不确定这是否相关,但这似乎也是一件奇怪的事情。 看看一些 malloc() 手册:它的参数是 size_t 类型是有原因的。 int 不能保证容纳任何可能的对象大小,size_t 可以。顺便说一句,它是无符号的——负大小没有多大意义。 所以就写吧 size_t SIZE = ((size_t)v) * v; 因为你的 v 是一个 int 你必须通过强制转换参数之一来强制这个乘法作为 size_t 完成。 稍微好一点的方法是将 v 制作为 unsigned long 并使用 strtoul() 代替 atoi()。 然后,在使用之前检查您的malloc()的结果。即使使用正确的大小参数,它仍然可能返回 NULL。如果是这样,这仅仅意味着您当时没有足够的可用内存。 毕竟,使用 v=10000 并假设 int 占用四个字节(这很常见),您已经尝试一次分配 400 MB。 他是中本聪..但是这是构建项目的投资组合 不要试图理解这一点..这会让你很快发疯..
使用 XAMPP 安装 Shopware 时出现问题:“无法下载 Shopware”
我在尝试使用 XAMPP 安装 Shopware 时遇到问题。我按照 YouTube 上的教程(https://www.youtube.com/watch?v=h8ufOH8kHmA)并成功下载了 shopware-insta...
如何在Apple Silicon M2上安装ffi版本1.11.1
我尝试使用捆绑安装来安装 ffi 1.11.1,但出现此错误: 安装 ffi (1.11.1) 时出错,Bundler 无法继续。 确保 `gem install ffi -v '1.11.1' --
我正在使用 Astro (v.4.0.8) 开发一个应用程序,我遇到了一个无法解决的问题。我想渲染图像并导入特定的 svg 以及来自 '... 的
我有一个与 Nodemailer v. 6.9.3 相关的错误。当我启动 nodeJS localhost 时,会出现以下内容: 错误:连接ECONNREFUSED 127.0.0.1:465 在 TCPConnectWrap.afterConnect [作为未完成](节点:ne...
我可以按照此处找到的示例创建新用户: curl -v -k --user [email protected]@tenant1.com:admin --data '{"schemas":[],"name":{"familyName":"jackson","givenName":"kim "},"电话号码...
如何使用 JS 延迟加载新的 Google Adsense 代码
谷歌已取代 <question vote="1"> <p>谷歌已取代 <br/></p> <p><pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js</script></code></pre> <br/></p> <p>与<br/></p> <p><pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"</script></code></pre> <br/></p> <p><strong>参考</strong>:<a href="https://support.google.com/adsense/answer/10627874" rel="nofollow noreferrer">Google Adsense 公告</a><br/></p> <p><strong>旧的 Adsense 代码就像:</strong></p> <pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:inline-block;width:350px;height:90px" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </code></pre> <p><strong>新的 Adsense 代码如下:</strong></p> <pre><code><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX" crossorigin="anonymous"></script> <ins class="adsbygoogle" style="display:inline-block;width:350px;height:90px" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </code></pre> <p><strong>页面加载完成后加载广告的旧 JS 代码是:</strong></p> <pre><code> <script type="text/javascript"> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </code></pre> <p>由于在新广告代码的脚本标签中添加了<pre><code>?client=ca-pub-xxxxxx" crossorigin="anonymous"</code></pre>,那么现在加载广告的新JS代码是什么?</p> </question> <answer tick="true" vote="1"> <p>嗯,这并不是真正的延迟加载,这是延迟加载,不推荐,但你就可以了</p> <pre><code><script> function downloadJSAtOnload() { var element = document.createElement("script"); element.src = "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"; element.async = true; element.setAttribute('crossorigin', 'anonymous'); document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", downloadJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", downloadJSAtOnload); else window.onload = downloadJSAtOnload; </script> </code></pre> <p>如果您正在寻找延迟加载 AdSense,请查看 <a href="https://www.guest.blog/post/12068/lazy-loading-adsense-ads/" rel="nofollow noreferrer">延迟加载 Adsense</a></p> </answer> <answer tick="false" vote="0"> <blockquote> <h2>引用的标题##<script async</h2> <p>src="https://pagead2.googlesyndicate.com/pagead/js/adsbygoogle.js?client=ca-pub-1049121221402917" 跨桥=“匿名”></p> </blockquote> </answer> </body></html>
我尝试按名称获取每行的last_modify_date 列的最大值。 我只得到一个结果。但我想得到这样的结果: 名称 | v |最后修改日期 ---------------------------- 前...
假设我有一个类模板: 模板 结构A { T值; 无效 foo(自动乐趣) { 乐趣(价值); // ^^^^^^^ 将值作为 const 对象传递 } }; 我想将 const 添加到 v...
信息:node_modules/node-expose-sspi/dist/sso/client.d.ts:3:8 - 错误 TS1192:模块“http”没有默认导出。 在我安装了node-expose-sspi之后,然后编译了Angular项目(v...
我已经在 Ubuntu 上安装了 PHP 7: php-v PHP 7.0.5-2+deb.sury.org~trusty+1 (cli) ( NTS ) 版权所有 (c) 1997-2016 PHP 集团 Zend Engine v3.0.0,版权所有 (c) 1998-2016 Zend Technologies 机智...
Python程序中将罗马数字转换为整数时出错(我找到了解决方案,但显然我现在无法删除它)
def romanToInt(self, s: str) -> int: 数量 = 0 lst = ["I","V","X","L","C","D","M"] dict = {“我&quo...
在 resources/images 目录中,我有 10 个图像,我想通过 vue3-carousel 库显示,图像名称是 1.jfif,2.jfif ..etc,但是属性绑定不能像这样工作,它给出
此问题与此视频相关:https://www.youtube.com/watch?v=jXugs4B3lwU 我所缺少的部分比视频整体涵盖的概念要简单一些。在下面的示例代码中:...
如何让运行在 WSL2 上的节点服务器通过 LAN 转发,以便可以通过电话访问?
我尝试过以下方法: https://www.youtube.com/watch?v=yCK3easuYm4 https://medium.com/codemonday/access-wsl-localhost-from-lan-for-mobile-testing-8635697f008 https://superuser.com/questions/1679...