vue-render-function 相关问题

使用部分进行主动拆解/重新渲染不会重新渲染部分

这是小提琴（对警报感到抱歉）http://jsfiddle.net/PCcqJ/92/ var ractive = new Ractive({ 模板：'#templateOne'，部分：{ aPartial：'哦，看，partia... 这是小提琴（抱歉有警报）http://jsfiddle.net/PCcqJ/92/ var ractive = new Ractive({ template: '#templateOne', partials: { aPartial: '<div>Oh look, the partial is rendered!</div>' } }); function cb() { alert('but now we unrender'); ractive.once('complete', function() { alert('we rendered again, and now you can\'t see the partial content'); }); ractive.render('container'); } ractive.render('container'); ractive.once('complete', function() { alert('so we render the first time, and you can see the partial'); ractive.unrender().then(cb); }); 此处的部分不会重新渲染。为什么是这样？部分仍在部分对象中，并且它们尚未渲染，那么什么会阻止它们再次渲染？这个小提琴会渲染、取消渲染，然后重新渲染，每次发生其中一种情况时都会向您发出警报。我做了一个工作jsfiddle：https://jsfiddle.net/43gLqbku/1/ <div id='container'></div> <script id="templateOne" type="x-template"> {{>aPartial}} </script> var ractive = new Ractive({ el:"#container", template: '#templateOne', partials: { aPartial: '<div>Oh look, the partial is rendered!</div>' } }); function cb() { alert('but now we unrender'); ractive.once('complete', function() { alert('we rendered again, and now you can\'t see the partial content'); }); ractive.render('container'); } //ractive.partials.part = '<div>this is a partial</div>'; ractive.once('complete', function() { alert('so we render the first time, and you can see the partial'); ractive.unrender().then(cb); }); 在调用render之前需要调用ractive.once('completed') 你不需要 ractive.render("container");在活动代码下，因为它在第一次运行时自动呈现在你的jsfiddle中你导入的ractive不起作用你没有在 jsFiddle 活动代码中包含 el:"#container"

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，我的表单值可用于更新商店和更新表单。这是我能想到的最好的

调用 setState() 函数时会发生什么？

setState() 函数运行什么？它只运行 render() 吗？

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 => {}) 这就是我让它为我工作的方式。

如何防止点击时嵌套 React 组件中的事件冒泡？

这是一个基本组件。和都有 onClick 函数。我只想触发上的 onClick，而不是。我怎样才能实现这个目标？我玩过这是一个基本组件。 <ul> 和 <li> 都有 onClick 函数。我只想触发 <li> 上的 onClick，而不是 <ul>。我怎样才能实现这个目标？我尝试过 e.preventDefault()、e.stopPropagation()，但无济于事。 class List extends React.Component { constructor(props) { super(props); } handleClick() { // do something } render() { return ( <ul onClick={(e) => { console.log('parent'); this.handleClick(); }} > <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} > </li> </ul> ) } } // => parent // => child 我也有同样的问题。我发现 stopPropagation did 有效。我会将列表项拆分为一个单独的组件，如下所示： class List extends React.Component { handleClick = e => { // do something } render() { return ( <ul onClick={this.handleClick}> <ListItem onClick={this.handleClick}>Item</ListItem> </ul> ) } } class ListItem extends React.Component { handleClick = e => { e.stopPropagation(); // <------ Here is the magic this.props.onClick(); } render() { return ( <li onClick={this.handleClick}> {this.props.children} </li> ) } } React 使用事件委托和文档上的单个事件侦听器来处理冒泡事件，例如本例中的“单击”，这意味着不可能停止传播；当您在 React 中与真实事件交互时，真实事件已经传播。 React 的合成事件上的 stopPropagation 是可能的，因为 React 在内部处理合成事件的传播。 stopPropagation: function(e){ e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); } 关于 DOM 事件的顺序：CAPTURING vs BUBBLING 事件传播有两个阶段。这些被称为 “捕获” 和 “冒泡”。 | | / \ ---------------| |----------------- ---------------| |----------------- | element1 | | | | element1 | | | | -----------| |----------- | | -----------| |----------- | | |element2 \ / | | | |element2 | | | | | ------------------------- | | ------------------------- | | Event CAPTURING | | Event BUBBLING | ----------------------------------- ----------------------------------- 首先发生捕获阶段，然后是冒泡阶段。当您使用常规 DOM api 注册事件时，默认情况下事件将成为冒泡阶段的一部分，但这可以在事件创建时指定 // CAPTURING event button.addEventListener('click', handleClick, true) // BUBBLING events button.addEventListener('click', handleClick, false) button.addEventListener('click', handleClick) 在React中，冒泡事件也是你默认使用的。 // handleClick is a BUBBLING (synthetic) event <button onClick={handleClick}></button> // handleClick is a CAPTURING (synthetic) event <button onClickCapture={handleClick}></button> 让我们看一下handleClick回调（React）： function handleClick(e) { // This will prevent any synthetic events from firing after this one e.stopPropagation() } function handleClick(e) { // This will set e.defaultPrevented to true // (for all synthetic events firing after this one) e.preventDefault() } 我在这里没有看到提到的替代方案如果您在所有事件中调用 e.preventDefault()，您可以检查事件是否已被处理，并防止再次处理它： handleEvent(e) { if (e.defaultPrevented) return // Exits here if event has been handled e.preventDefault() // Perform whatever you need to here. } 关于合成事件和原生事件的区别，请参阅React文档：https://reactjs.org/docs/events.html 这是防止单击事件前进到下一个组件然后调用 yourFunction 的简单方法。 <Button onClick={(e)=> {e.stopPropagation(); yourFunction(someParam)}}>Delete</Button> 这不是 100% 理想，但如果在儿童中传递 props 太痛苦 -> 儿童时尚或为此目的创建 Context.Provider/Context.Consumer just），你正在处理另一个库，它有自己的处理程序，它在您的处理程序之前运行，您也可以尝试： function myHandler(e) { e.persist(); e.nativeEvent.stopImmediatePropagation(); e.stopPropagation(); } 据我了解，event.persist方法可以防止对象立即被扔回React的SyntheticEvent池中。因此，当你伸手去拿 React 中传递的 event 时，它实际上并不存在！这种情况发生在孙子中，因为 React 在内部处理事情的方式是首先检查父进程是否有 SyntheticEvent 处理程序（特别是如果父进程有回调）。只要您不调用 persist 来创建大量内存以继续创建诸如 onMouseMove 之类的事件（并且您没有创建某种 Cookie Clicker 游戏，例如 Grandma's Cookies），就应该完全没问题！另请注意：偶尔阅读他们的 GitHub，我们应该密切关注 React 的未来版本，因为他们可能最终会解决一些问题，因为他们似乎打算在编译器中折叠 React 代码/转译器。如果您希望发生嵌套元素中的操作而不是父元素中的操作，那么，您可以从父元素的操作处理程序中检查目标的类型，然后基于该类型执行操作，即，如果目标是我们的嵌套元素，我们什么也不做。否则两个处理程序都会被调用。 // Handler of the parent element. Let's assume the nested element is a checkbox function handleSingleSelection(e) { if(e.target.type !== 'checkbox') { // We do not do anything from the // parent handler if the target is a checkbox ( our nested element) // Note that the target will always be the nested element dispatch(lineSelectionSingle({ line })) } } 我在 event.stopPropagation() 工作时遇到问题。如果您也这样做，请尝试将其移动到单击处理程序函数的顶部，这就是我需要做的来阻止事件冒泡。示例函数： toggleFilter(e) { e.stopPropagation(); // If moved to the end of the function, will not work let target = e.target; let i = 10; // Sanity breaker while(true) { if (--i === 0) { return; } if (target.classList.contains("filter")) { target.classList.toggle("active"); break; } target = target.parentNode; } } 您可以通过检查事件目标来避免事件冒泡。例如，如果您将输入嵌套到 div 元素，其中有单击事件的处理程序，并且您不想处理它，则单击输入时，您可以将 event.target 传递到您的处理程序中，并检查处理程序应该是根据目标的属性执行。例如，您可以检查 if (target.localName === "input") { return}。所以，这是一种“避免”处理程序执行的方法解决此问题的另一种方法可能是在子级上设置 onMouseEnter 和 onMouseLeave 事件。（您的 < li > 标签）每当鼠标悬停在子级上时，您都可以设置一个特定的状态，以阻止父级执行 onClick 函数内容。比如： class List extends React.Component { constructor(props) { super(props) this.state.overLi = false } handleClick() { // do something } render() { return ( <ul onClick={(e) => { if (!this.state.overLi) { console.log("parent") this.handleClick() } }} > <li onClick={(e) => { console.log("child") // prevent default? prevent propagation? this.handleClick() }} onMouseEnter={() => this.setState({ overLi: true, }) } onMouseLeave={() => this.setState({ overLi: false, })} ></li> </ul> ) } } 我进行了很多搜索，但没有设法使用 e.stopPropagation() 为我的上下文实现任何解决方案您可以验证点击的元素是否是预期的元素。例如： class List extends React.Component { constructor(props) { super(props); } handleClick(e) { if(e.target.className==='class-name'){ // do something } } render() { return ( <ul {/* Replace this with handleClick */} onClick={(e) => { console.log('parent'); this.handleClick(); }} <li onClick={(e) => { console.log('child'); // prevent default? prevent propagation? this.handleClick(); }} </li> </ul> ) } } 执行此操作的新方法更加简单，并且会节省您一些时间！只需将事件传递到原始点击处理程序并调用 preventDefault();。 clickHandler(e){ e.preventDefault(); //Your functionality here }

在 Rails 5 中单击浏览器上的后退按钮时，带有 Select2 的表单会重复

_header.html.erb（用于表单部分） <%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %> _header.html.erb（用于表单部分） <%= form_for home_path, class: 'home', role: 'search', method: :get do |f| %> <div class="form-group" style="display:inline;"> <div class="input-group input-group-md"> <%= text_field_tag :q, params[:q], placeholder: ... ,class: 'form-control hideOverflow', type: "search" %> <%= select_tag "category", options_from_collection_for_select(...),include_blank: true, class: 'form-control hideOverflow', type: "search" %> <%if logged_in? %> <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', type: "search" %> <% else %> <%= select_tag "location", options_for_select([...], ...),class: 'form-control hideOverflow', include_blank: true, type: "search" %> <% end %> <span class="input-group-addon"><%= submit_tag "Search", class: "btn-transparent"%></span> </div> </div> <% end %> JS代码 <script> $( document ).on('turbolinks:load', function() { $('select#category').select2({ width: '60%', dropdownAutoWidth : true, placeholder: "Choose a category", maximumSelectionLength: 3 }); $('select#location').select2({ width: '40%', dropdownAutoWidth : true, minimumResultsForSearch: Infinity }); }); </script> 故障或渲染问题（单击链接查看图像）有人可以帮我解决为什么吗？另外，我的搜索表单位于标题部分文件的导航栏中。如果我去掉脚本中的 $(...).select ，一切都会正常...我认为 select.js 有问题在此回复： https://stackoverflow.com/a/41915129/5758027 我在自己的代码中使用了这个解决方案： $(document).on('turbolinks:before-cache', function() { // this approach corrects the select 2 to be duplicated when clicking the back button. $('.select-select2').select2('destroy'); $('.select-search-select2').select2('destroy'); } ); 和观察者： $(document).ready( ready ); //... once document ready $(document).ajaxComplete( ready ); //... once ajax is complete $(document).on('turbolinks:load', ready ); //... once a link is clicked function ready() { $(".select-search-select2").select2({ theme: "bootstrap", language: 'es', allowClear: true }); $(".select-select2").select2({ theme: "bootstrap", language: 'es', minimumResultsForSearch: Infinity, allowClear: true }); }; 总是清除缓存不是会让使用 Turbolink 变得毫无意义吗？不如这样？ $(document).on('turbolinks:before-cache', function(e) { return $('.form-control.select2').each(function() { return $(this).select2('destroy'); }); }); 我无法解决这个渲染问题（仍在等待正确的答案！），但如果有人像我一样遇到类似的问题，请尝试跳出框框思考。这是我的技巧：我在应用程序中添加了一个后退按钮。获取完整的url路径 # get the previous url def save_previous_page session[:return_to] = request.fullpath end 仅当页面不是主页或搜索页面时才显示后退按钮 <% if session[:return_to] != request.fullpath%> <%= link_to session.delete(:return_to) || request.fullpath, class: 'back-button' do%> <i class="fa fa-arrow-circle-left" aria-hidden="true"></i> <%end%> <% end %> 同时，我仍在等待并尝试解决渲染问题... 解决了问题只需将此代码添加到您的 .js 文件中 Turbolinks.clearCache(); 这很可能是一些资源不一致，您应该检查您的 app\views\layouts 文件夹中是否有重复声明 wither jQuery、jQuery UJS 或 Turbolinks 的文件。检查页面的所有 <script> 标签，以及是否在 layout 文件夹和内部视图中声明相同的脚本。如果情况并非如此，请检查是否有 render、yield 或 build 呼叫简单的解决方案，不要在您不希望它运行的东西上运行 select2 构建器。 $("select#category:not(.select2-container):not(.select2-hidden-accessible)").select2(); Rails 7 更新这里的很多东西在 Rails 7 中都不起作用，尤其是 turbolinks:before-cache 事件。您正在寻找的新事件是 turbo:before-cache 和 turbo:load，所以它看起来像这样： $(document).on("turbo:before-cache", function() { $("#select_id").select2('destroy'); }); $(document).on('turbo:load', function() { $('#select_id').select2(); });

Asyncapi 生成抛出不支持版本“3.0.0”。请使用“2.6.0”

我正在编写自定义模板以根据 AsyncAPI 规范生成代码。我正在使用react-render-engine https://www.asyncapi.com/docs/tools/generator/react-render-engine 并且我正在遵循本教程...

如何使用 Tailwind CSS 实用程序类使部分粘性

在我的 Next.js Web 应用程序中，我有一个页面，如下所示：我想让该部分（用标签包裹）以蓝色粘性突出显示，这样当我滚动时，它会保持在原来的位置，并且只有 m... 在我的 Next.js Web 应用程序中，我有一个页面，如下所示：我想使该部分（包含在 <aside> 标签中）以蓝色粘性突出显示，这样当我滚动时，它会保持在原来的位置，并且只有主要部分（包含图表的部分）会滚动。这是 layout.tsx 文件： import { dashboardConfig } from "@/config/dashboard"; import { MainNav } from "@/components/nav/main-nav"; import { DashboardNav } from "@/components/nav/dashboard-nav"; interface DashboardLayoutProps { children?: React.ReactNode; } export default async function DashboardLayout({ children, }: DashboardLayoutProps) { return ( <div className="flex min-h-dvh flex-col relative"> <header className="container z-40 bg-background"> <MainNav /> </header> <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative"> <aside className="hidden w-[200px] flex-col md:flex sticky top-0"> <DashboardNav items={dashboardConfig.sidebarNav} /> </aside> <main className="flex w-full flex-1 flex-col overflow-hidden"> {children} </main> </div> </div> ); } 请注意，我已将类 sticky 和 top-0 应用于我想要粘贴位置的部分。但它不起作用。我做错了什么？考虑通过 align-self: start 将 self-start 应用到粘性元素。默认情况下，它将具有 align-self: stretch，这将使其成为其父网格元素的完整高度，因此不会观察到粘性效果。通过应用 align-self: start，它的高度将仅与其内容一样高，如果存在垂直自由空间，则可以观察到粘性效果。 const dashboardConfig = { sidebarNav: '' }; const MainNav = () => 'MainNav'; const DashboardNav = () => 'DashboardNav'; function DashboardLayout({ children, }) { return ( <div className="flex min-h-dvh flex-col relative"> <header className="container z-40 bg-background"> <MainNav /> </header> <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative"> <aside className="hidden w-[200px] flex-col md:flex sticky top-0 self-start"> <DashboardNav items={dashboardConfig.sidebarNav} /> </aside> <main className="flex w-full flex-1 flex-col overflow-hidden"> {children} </main> </div> </div> ); } function App() { return ( <DashboardLayout> <div class="h-[200vh]"></div> </DashboardLayout> ); } ReactDOM.createRoot(document.getElementById('app')).render(<App/>); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div id="app"></div>

在 HTTPS 中运行 Visual Studio 默认 Vue 项目

我使用默认的 Vue 项目模板在 Visual Studio 2019 中创建了一个标准的 Vue 应用程序。我使用的是 Windows 10。这将创建一个可以使用 Vue CLI 启动的简单项目。这...

InvalidStateError：无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的 HTMLImageElement 处于“损坏”状态

从 'matter-js' 导入 { Bodies, Composite, Engine, Mouse, MouseConstraint, Render, Runner }；从 'react' 导入 React, { useEffect }; 从 './styles' 导入 * as S；从“../../.....”导入颤振

释放函数体内std::function的内存

我需要将 std::function 作为 void 指针传递以异步执行，因此我在堆上创建了一个 std::function 。删除函数体内的 std::function 对象是否安全？请看...

防止 HTML <dialog> 用 Vue 关闭

我正在尝试使用 Vue 以编程方式阻止 HTML 对话框元素的关闭事件关闭对话框。这是我正在使用的代码：从“vue”导入{ref}； const 对话框模板Re...

Vite+Vue 页面不需要的 CSS 样式

在Vite-Vue应用程序中，我实现了index.html和vue组件/视图的样式，但浏览器将它们显示为被划掉。 AMany =我在组件/视图中添加的样式也是 cro...

vue-router useRouter 在构建库组件时不起作用

我正在构建一个 Vue3 npm 组件库，希望我可以使用 vue-router 的 useRouter 访问当前路由器，并且它将由导入我的任何 vue 应用程序自动提供

Vue 2.0 + webpack 使用 npm 包中的组件

我正在尝试使用 webpack 和 Vue 2.0 设置一个项目，但在我的项目中使用 npm 包（如 vue-parallax）中的组件时遇到了一些麻烦。我安装了该软件包并且一切...

Quasar Vue Router 解析名为route的href

我正在尝试使用 vue router 构建 href 链接我在routes.js中有以下内容常量路由 = [ { 小路： ”/”，组件：() => import("layouts/MainLayout.vue")...

如何在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 在数组更改时高效更新和重新渲染组件。

在 Windows 10 中使用 vscode 进行四开

渲染时，弹出错误：未找到四开本安装但是当我将 quarto 与 cli 一起使用时：quarto render myfile.qmd，成功环境：操作系统：Windows 10 专业版四开——版本：1.0.37 vscode

azure function 应用程序环境的配置值

您正在开发一个Azure Function App。您使用 Azure Function App 主机不支持的语言开发代码。代码语言支持 HTTP 原语。您必须部署...

javascript：如何中止 $.post()

我的post方法如下图： $(".buttons").click(function(){ var gettopic=$.post("topic.php", {id: topicId}, function(result){ // 处理返回结果的代码 }); }) 我尝试...

Vue 3 - 如何使用 typescript 将组件包装在 Vue 中

我正在尝试包装 PrimeVue 组件（日历），稍微更改其样式，然后再次导出。反应中类似以下内容： const WrappedCalendar: React.FC = (...

Vue 3 简单的包罗万象的后备路由在服务器上不起作用

我使用 Vue router 4 创建了一个新的 Vue 3 应用程序。当我通过访问链接时，它会打开页面，但是当我直接打开链接时，它会显示未找到错误。 { 不是芙...

在计算警告中使用 vue-i18n.t()

升级我的项目后，每次尝试在计算变量中使用 VueI18n.t() 时，我都会收到此警告： [Vue warn]：在计算的 getter 内部调用 getCurrentInstance()。这是inco...

如何使用Websocket从FastAPI（后端）返回JSON到Vue（前端）？

我有一个应用程序，前端是用Vue实现的，后端使用FastAPI框架。通信是通过websocket实现的。目前，前端允许用户

如何使 Vue 2 提供/注入 API 响应式？

我按如下方式设置代码，并且能够从 SomeComponent.vue 中的 setter 更新 App.vue 中的 checkout_info，但 SomeComponent.vue 中的 getter 不是响应式的。 // 应用程序.vue 导出默认值 {...

如何使用Vue Router的相对重定向（不起作用）？

我正在从 Vue router Doc 学习相对重定向。我正在尝试实现代码的文档示例。常量路由 = [ { // 始终将 /users/123/posts 重定向到 /users/123/prof...

NodeJS 我当前的 Google Cloud 函数名称是什么？

我想使用当前Google Cloud Function的名称来驱动一些逻辑。如何确定我的 Google Cloud Function 名称是什么？

Vue.js：为什么 $el 返回文本节点

我有以下代码：导出默认类自定义扩展 Vue { 安装（）{ console.log(this.$el); ...

“拒绝应用 {link} 中的样式，因为其 MIME 类型不受支持且启用了严格的 MIME 检查。”在 Vue+Vuetify 应用程序中

我使用 vue-create-app 创建了一个 Vue+Vuetify 项目。在我的本地系统中，Vuetify 工作正常，但在 Gitlab 实时服务器上不起作用。并在实时应用程序中显示此错误消息： “拒绝应用...

渲染对象列表时“无法读取未定义的属性”

我试图在 Vue 3 中按名称渲染对象列表，但我不断收到“无法读取未定义的属性（读取“名称”）”错误。我对 Vue 还是新手，我不知道......

Azure Function Python V2 一个函数应用程序中的多个函数

我正在寻找有关在一个 Azure Function App 中为多个函数创建项目结构的指导。这是我之前读过的一篇文章在一个 Azure Function App 中创建多个函数有一个...

Vue 3，组合 API：“排除”TypeScript 实用程序类型导致道具验证错误

我正在使用 Vue 3 以及 Composition API 和 TypeScript，一切都是最新的稳定版本。假设我有以下类型：导出接口人{ 名称：字符串； } 导出类型统计...

如何在vue-i18n中使用@等特殊字符？

我正在使用 vue-i18n 来本地化我的表单。我有一个电子邮件字段，其中有一个占位符，其中包含一个包含 @ 符号的示例电子邮件地址。 emailPlaceholder：'例如：[email protected]'

Laravel 和 Vue Js 应用程序中的脚本无法使用响应正文（原因：CORS 缺少允许来源）

开发 Laravel 10 + Vue Js 3 应用程序两个项目文件是分开的。我也有以下 api.php 登录路线路线::post('/login', [LoginController::class, '提交']); 并使用

为什么我在 Vue 开发工具中看不到 Pinia？

我正在使用 Vue 3、Vuetify 3 和 Pinia 开发一个应用程序，所有这些我都在学习过程中。我正在尝试按照这个视频来学习 Pinia，大约 17:50，演示者说要安装...

使用 Azure Function 运行时和 pytest 'ModuleNotFoundError：没有名为...的模块'时出现导入问题

Vue/Nuxt：如何让组件真正动态？

为了使用动态定义的单页面组件，我们使用组件标签，因此： ... 从 '@/

在门户上部署Vue应用程序后出错。Azure

我创建了我的 Vue-Vite 应用程序。然后我在 dev.azure - Web App 上创建了存储库。接下来我将其部署在portal.azure.com 上。修复了一些错误后，我仍然不知道如何修复此错误：主要....

如何在 vue javascript 应用程序中显示服务器目录中的所有图像

我正在尝试将主机（服务器）上的一个目录（图表）中存在的所有图像显示到 vue 页面中，而不必手动将它们全部列出在数据中，因此必须重建...

有没有办法让我的 WordPress 网站指向 diste/templates 目录中的 index.html 而不是正常的 WordPress 行为？

我正在使用 Vue.js 开发一个无头 WordPress 网站，并且我有一个名为 vue-wordpress 的自定义主题。该主题是使用 Vue CLI 搭建的。这是目录结构 - 距离资产模板

如何在Azure Function中获取连接字符串？

我在 Azure 云中有一个 Azure Function 和一个 PostreSQL DB。我想从我的 Azure 函数访问连接字符串，我们将其称为 IT-PostgreSQL。这是我的Azure功能：命名空间

标签错误：渲染时出现 React JSX 样式标签错误

这是我的反应渲染函数渲染：函数（）{ 返回（某事 .rr{ 红色; ...</desc> <question vote="94"> <p>这是我的反应渲染函数</p> <pre><code>render:function(){ return ( <div> <p className="rr">something</p> <style> .rr{ color:red; } </style> </div> ) } </code></pre> <p>这给了我这个错误</p> <blockquote> <p>JSX：错误：解析错误：第 22 行：意外的标记：</p> </blockquote> <p>这里出了什么问题？我可以将完整的普通 CSS 嵌入到 React 组件中吗？</p> </question> <answer tick="false" vote="130"> <p>使用 es6 模板字符串（允许换行）很容易做到。在你的渲染方法中：</p> <pre><code>const css = ` .my-element { background-color: #f00; } ` return ( <div className="my-element"> <style>{css}</style> some content </div> ) </code></pre> <p>至于用例，我正在为一个 div 执行此操作，其中包含一些用于调试的复选框，我希望将其包含在一个文件中，以便稍后轻松删除。</p> </answer> <answer tick="true" vote="73"> <p>JSX 只是 javascript 的一个小扩展，它不是自己完整的模板语言。所以你会像在 javascript 中那样做：</p> <pre><code>return ( <div> <p className="rr">something</p> <style>{"\ .rr{\ color:red;\ }\ "}</style> </div> ) </code></pre> <p><a href="http://jsfiddle.net/r6rqz068/" rel="noreferrer">http://jsfiddle.net/r6rqz068/</a></p> <p>但是根本没有充分的理由这样做。</p> </answer> <answer tick="false" vote="30"> <p>内联样式最好直接应用于组件 JSX 模板：</p> <pre><code>return ( <div> <p style={{color: "red"}}>something</p> </div> ); </code></pre> <p>演示：<a href="http://jsfiddle.net/chantastic/69z2wepo/329/" rel="noreferrer">http://jsfiddle.net/chantastic/69z2wepo/329/</a></p> <hr/> <p><strong>注意：JSX 不支持 style 属性的 HTML 语法</strong></p> <p>使用驼峰式属性名称声明属性，例如，</p> <pre><code>{ color: "red", backgroundColor: "white" } </code></pre> <p>进一步阅读此处：<a href="http://facebook.github.io/react/tips/inline-styles.html" rel="noreferrer">http://facebook.github.io/react/tips/inline-styles.html</a></p> </answer> <answer tick="false" vote="20"> <p>这可以通过使用反引号“`”来完成，如下所示</p> <pre><code>return (<div> <p className="rr">something</p> <style>{` .rr{ color:red; } `}</style> </div>) </code></pre> </answer> <answer tick="false" vote="10"> <p>“class”是 JavaScript 中的保留字。而是使用“className”。</p> <p>此外，您必须记住您使用的是 JSX，而不是 HTML。我不相信 jsx 会解析你的标签。更好的方法是使用您的样式创建一个对象，然后将其应用为样式（见下文）。</p> <pre><code>var styles = { color:"red"; } return ( <div> <p style={styles}>something</p> </div> ) </code></pre> </answer> <answer tick="false" vote="8"> <ol> <li>创建一个函数来处理插入样式标签。</li> <li>将所需的 CSS 添加到字符串变量中。</li> <li><p>将变量添加到 <pre><code><style></code></pre> 标记内返回的 JSX。</p> <pre><code>renderPaypalButtonStyle() { let styleCode = "#braintree-paypal-button { margin: 0 auto; }" return ( <style>{ styleCode }</style> ) } </code></pre></li> </ol> </answer> <answer tick="false" vote="4"> <p>这就是我所做的：</p> <pre><code>render(){ var styleTagStringContent = ".rr {"+ "color:red"+ "}"; return ( <style type="text/css"> {styleTagStringContent} </style> ); </code></pre> </answer> <answer tick="false" vote="0"> <p>经过一番摸索和尝试，终于找到了解决方案。关键是危险的SetInnerHTML。代码如下：</p> <pre><code> <script src="https://pie-meister.github.io/PieMeister-with Progress.min.js"></script> import React from 'react' const style = ` <pie-chart class="nested" offset="top"> <style> path { stroke-linecap: round; stroke-width: 90; } [color1] { stroke: #BFBDB2; stroke-width: 50; } [color2] { stroke: #26BDD8; stroke-width: 60; } [color3] { stroke: #824BF1; } [part="path"]:not([y]) { stroke: #BFBDB2; stroke-width: 60; opacity: 0.4; } </style> <slice color1 size="100%" radius="200"></slice> <slice color1 size="88%" radius="200" y="65"><tspan> $size</tspan></slice> <slice color2 size="100%" radius="100"> </slice> <slice color2 size="40%" radius="100" y="165"><tspan> $size</tspan></slice> <slice color3 size="100%" radius="0"> </slice> <slice color3 size="10%" radius="0" y="265"><tspan> $size</tspan></slice> </pie-chart>` export default function Styles() { return ( <div dangerouslySetInnerHTML={{__html:style}}/> ) } </code></pre> </answer> <answer tick="false" vote="-3"> <pre><code>import styled from 'styled-components; return ( <div> <Test>something</Test> </div> ) </code></pre> <p>下一步：</p> <pre><code>const Test = styled.p` color: red `; </code></pre> </answer> </body></html>

滚动时仅触发一次功能

我想在div滚动到视口时启动一个函数。我的问题是，每次我继续滚动时，该功能都会再次触发/启动。 HTML： <... 我想在 div 滚动到视口中时启动一个函数。我的问题是，每次我继续滚动时，该功能都会再次触发/启动。 HTML： <div class="box"></div> JS： $(document).ready(function() { function start() { alert("hello"); } $(window).scroll(function() { if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); start(); } else { $(".box").removeClass("green"); } }); }); 总结一下：当div滚动到视口中时，应该启动“start”函数。但触发一次后就不能再触发了。小提琴您可以设置一个标志，例如： var started = false; function start() { if(!started) { alert("hello"); } started = true; } 演示 $(document).ready(function() { var started = 0; function start() { if(started==0) { alert("Alert only once"); } started = 1; } $(window).scroll(function() { if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); start(); } else { $(".box").removeClass("green"); } }); }); *{margin:0;} .box { background: red; height: 200px; width: 100%; margin: 800px 0 800px 0; } .green { background: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <br /> <center> <br /> <h1>scroll down</h1> </center> <div class="box"></div> 有很多方法可以解决这个问题。您可以删除事件侦听器（因为您使用的是 jQuery，所以我将使用 on 和 off 方法）： $(window).on('scroll', function() { if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); start(); } else { $(".box").removeClass("green"); } $(window).off('scroll'); }); 如果你希望窗口滚动方法在启动方法满足要求后停止..你可以这样做 $(document).ready(function() { var toggleScroll = false; function start() { alert("hello"); } $(window).one("scroll", checkToggleScroll); function checkToggleScroll(){ if ( $(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { $(".box").addClass("green"); toggleScroll = true; start(); } else { $(".box").removeClass("green"); } if(!toggleScroll){ $(window).one("scroll", checkToggleScroll); } } }); 当start()没有类$(".box)（在一定量的滚动后添加）时，只需运行"green"函数。 $(document).ready(function() { function start() { alert("hello"); } $(window).scroll(function() { if ($(window).scrollTop() >= $('.box').offset().top - ($(window).height() / 2)) { if (!$(".box").hasClass("green")) { $(".box").addClass("green"); start(); } } else { $(".box").removeClass("green"); } }); }); .box { background: red; height: 200px; width: 100%; margin: 800px 0 800px 0; } .green { background: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"></div>

Azure Function App 无法启动 Docker 容器，原因是“Azure.RequestFailedException：指定的资源名称包含无效字符。”

我们有一个从 Docker 映像部署的 Azure Function 应用程序。该函数正在运行 .NET 8.0，FUNCTIONS_EXTENSION_VERSION = ~4 且 FUNCTIONS_WORKER_RUNTIME = dotnet-isolated。该应用程序包含...

了解 std::function 的开销并捕获同步 lambda

考虑以下简单示例： #包括 #包括 #包括 #包括 #包括 #包括...

Vue js & laravel 后端编辑发票

编辑：我正在从发票项目中获取这些数组，其中产品与发票 ID 相匹配 [ { “ID”：27， “发票 ID”：14， “产品id”：1， ...

新的 Azure Function App 处理已由另一个 Function App 处理过的 Blob

我有以下情况。我有一个在 Windows 应用服务计划上运行的功能。该函数处理 blob。该函数具有默认的 LogsAndContainerScan 触发器。现在过了一段时间我...

ESLint：解析错误：意外的标记：

大家好我正在将我的 vue3 项目从 js 迁移到 typescript，我遇到了这个问题：这是我在 .vue 文件中的代码 const toto = (msg: string) => { </desc> <question vote="7"> <p>大家好，我正在将我的 vue3 项目从 js 迁移到 typescript，我遇到了这个问题：</p> <p><a href="https://i.stack.imgur.com/y5tG8.png" target="_blank"><img src="https://cdn.txt58.com/i/AWkuc3RhY2suaW1ndXIuY29tL3k1dEc4LnBuZw==" alt=""/></a></p> <p>这是我在 .vue 文件中的代码</p> <pre><code><script setup lang="ts"> const toto = (msg: string) => { console.log(msg) } </script> </code></pre> <p>这是我的 eslintrc.js</p> <pre><code>module.exports = { 'env': { 'browser': true, 'es2021': true }, 'extends': [ 'eslint:recommended', 'plugin:vue/vue3-essential' ], 'parserOptions': { 'ecmaVersion': 13, 'sourceType': 'module' }, 'plugins': [ 'vue' ], 'rules': { 'vue/multi-word-component-names': 'off', 'vue/object-curly-spacing': [2, 'always'], 'vue/html-closing-bracket-spacing': [2, { 'selfClosingTag': 'always' }], 'vue/max-attributes-per-line': [2, { 'singleline': { 'max': 1 }, 'multiline': { 'max': 1 } }], 'semi': [2, 'never'] } } </code></pre> </question> <answer tick="true" vote="10"> <p>您需要配置 eslint 以支持 typescript，因为 eslint 不支持开箱即用。首先，您需要安装<a href="https://www.npmjs.com/package/@typescript-eslint/parser" rel="nofollow noreferrer">@typescript-eslint/parser</a>，然后安装<a href="https://www.npmjs.com/package/@typescript-eslint/eslint-plugin" rel="nofollow noreferrer">@typescript-eslint/eslint-plugin</a>。安装完这些后，请按如下方式更新您的配置 - </p> <pre><code>module.exports = { 'env': { 'browser': true, 'es2021': true, node: true }, 'extends': [ 'eslint:recommended', 'plugin:vue/vue3-essential' ], 'parserOptions': { 'ecmaVersion': 12, 'sourceType': 'module', parser: '@typescript-eslint/parser' }, 'plugins': [ 'vue', '@typescript-eslint' ], 'rules': { 'vue/multi-word-component-names': 'off', 'vue/object-curly-spacing': [2, 'always'], 'vue/html-closing-bracket-spacing': [2, { 'selfClosingTag': 'always' }], 'vue/max-attributes-per-line': [2, { 'singleline': { 'max': 1 }, 'multiline': { 'max': 1 } }], 'semi': [2, 'never'] } } </code></pre> </answer> <answer tick="false" vote="1"> <p>就我而言，问题是我使用解析器选项作为数组，而不是字符串：</p> <pre><code> parserOptions: { - parser: ['@typescript-eslint/parser'], + parser: '@typescript-eslint/parser', }, </code></pre> </answer> <answer tick="false" vote="0"> <p>如果你在项目中同时使用 JS 和 TS，此配置有帮助</p> <pre><code> overrides: [ { files: ['*.vue'], parser: 'svelte-eslint-parser', parserOptions: { parser: { // Specify a parser for each lang. ts: '@typescript-eslint/parser', js: 'espree', typescript: '@typescript-eslint/parser' } } } ], </code></pre> </answer> <answer tick="false" vote="-1"> <p>我在节点 v12.22.9 上遇到了这个问题。通过升级到 v14.21.2，我不再遇到解析错误。您可以使用命令升级/安装</p> <pre><code>nvm install v14.21.2 </code></pre> </answer> </body></html>

如何在背景图片上设置Vue Css变量

`这是我的状态 const 图标 = ref('image.jpg') 背景图像：url（图标）；此方法不起作用，请告知如何进行背景...

如何解决 Firebase Cloud Function 未在 SSR 的“/workspace/.next”中找到 Next.js 生产版本？

我之前问过这个问题，并且仍在为这个问题苦苦挣扎；谁能帮我解决这个问题： SSR Next.js 应用程序的 Firebase Cloud Function 未在...中找到生产版本

vue-render-function 相关问题

最新问题