是否可以颠倒项目在svelte的{#each ...}块中的显示顺序？ 我希望这是一个object数组，按id排序，其中最旧的条目在前面。我想先显示最新的条目。 编辑:为了说明使用.reverse()解决方案时会发生什么，这里是“之前”和“之后”转换屏幕： ? ?
浏览 20提问于2019-12-18得票数 1
我有一个选择在我的苗条应用程序。我无法让它显示它的初始值(default_car)，或者在我点击一辆汽车之后，显示selected_car
App.svelte
<Car {cars} on:message={carChanged} />
<div>
<button on:click={getDataStore}>Get data</button>
</div>
<script>
import Car from './Cars.svelte'
import { getBlankC
浏览 1提问于2022-04-02得票数 0
回答已采纳
假设我有一些对象数组，可以从其中添加和删除内容。对于每个对象，我希望呈现一个Svelte组件。
如果一个对象被移除，我希望销毁它相应的Svelte组件。如果添加了一个对象，我希望创建一个相应的Svelte组件。
到目前为止，我有些天真的想法，比如：
<script>
let someObjects = [];
const addObject = (obj) => {
someObjects = [...someObjects, obj];
}
const removeObject = (idx) => {
someObjects.sp
浏览 4提问于2022-04-11得票数 0
回答已采纳
我创建了由500行组成的表，点击时倒转它感觉很慢，主观上类似于500 so左右。
性能合理吗？我觉得JS中500行的倒转表应该更快。
和.
纯JS感觉比Svelte快得多
Table.svelte
<script>
import Cell from "./Cell.svelte"
const template = {
name: "Barrick Gold Corp",
symbol: "ABX",
has_options: true,
ib_symbol: "GOLD NYSE
浏览 5提问于2021-06-11得票数 3
回答已采纳
2回答
请原谅我可怜的问题描述。我用的是svelte/sapper组件。在该组件中，我使用预加载函数访问api并检索帖子列表。我在组件中显示该列表。我想把这个列表分成几个块(不管是多少，5，10等等)，然后在我的
问题是，我不知道从哪里开始，也不知道如何用苗条来做。在这个api中，我知道数组中有多少帖子，但在实际的dbs情况下，假设我不知道数组有多大或有多少条目。我只需要拆分列表并显示它，而不知道在组件中处理了多少条目。
这里是我的svelte组件(它是许多sapper应用程序组件中的一个，但我不会发布nav.svelte或应用程序的其余部分，因为我认为它是不相关的)
我的组件/页面:输出如下：
浏览 1提问于2019-12-11得票数 1
回答已采纳
1回答
我目前正在为一个划艇俱乐部做一名船员创建者。
包含数组的可写性声明为
import { writable, Writable } from 'svelte/store';
import type { CrewMember } from '../types';
export default writable<Writable<CrewMember>[]>([], () => {
console.log('Subscriber Detected ON CREW MEMBERS');
return ()
浏览 2提问于2021-08-30得票数 1
回答已采纳
为了响应键盘输入，我想把注意力转移到我的页面上。对于Svelte，似乎最简单的方法是使用自动焦点属性。但是，我无法获得条件自动聚焦属性的工作。
下面是我的问题的一个简单再现：
我是做错什么了还是这不可能在Svelte 3？
根据这个问题，条件自动焦点在以前版本的Svelte中是可能的：
根据这个问题，Svelte 3中的其他属性也可能有条件性：
浏览 3提问于2021-12-21得票数 0
2回答
我想用Svelte中的switch case语句有条件地呈现组件，如下所示：
// index.svelte
<script>
import TextContent from './components/text-content.svelte'
import { someData } from './api/some-data.js'
const ContentSwitch = (data) => {
switch (data._type) {
case 'block':
浏览 4提问于2021-10-25得票数 3
当内容发生变化时，如何在Svelte的div中褪色？我有一份已发表的文本清单和另一份草稿清单。我知道如何用普通的javascript来完成这个任务，但是除了加载页面时，还有svelte的解决方案吗？
async function published() {
lipub.style.backgroundColor = "#CCC";
lidraft.style.backgroundColor = "transparent";
const response = await fetch("api/mytexts/?id=" +
浏览 6提问于2022-05-04得票数 -1
回答已采纳
我不确定我是应该在这里张贴这个或添加到svelte创建者github，但我在这里有一个问题，可能需要一个修复应用在svelte方面。
我试图通过仅在视图中、DOM中显示的图像来呈现图像的虚拟列表。
下面是一个基本的REPL复制问题：
在我的电脑上，我只看到它非常清楚，如果我使用铬和打开开发工具的原因。当我滚动网格和添加到DOM中的图像列表时，图像会闪烁。
就好像Svelte所做的DOM操作导致了这种情况。
似乎，当我们滚动下一个项目到视图中并隐藏前面的项目时，svelte操作算法会更改虚拟网格上所有图像的位置和来源，以显示视图中的适当图像。
如果它能够协调列表中的项目，并保持在视图中的条目不改
浏览 0提问于2021-08-30得票数 1
回答已采纳
我在一个可排序的表格中出现了一些字体很棒的图标。它们呈现得很好，但是当我对表中的行进行重新排序时，图标仍然保持在原来的位置，并且不排序(重新呈现？)和其他表的内容。我用的是Svelte3和Bulma。我猜我需要使用Svelte的bind:this属性，但我不确定确切的位置。(表格行是在Svelte {#each}块中生成的。)
浏览 16提问于2020-04-24得票数 0
1回答
是否有一种简单的方法可以强制重新启动Svelte组件？
重新启动用例：
清除HTML文件输入的文件列表(不能重置路径/值)
使用CSS悬停时项目选择后Nav条下拉折叠
也许除了重新启动之外还有其他解决方案，但是让我们在这里使用组件重新启动。
在重新启动代码下面，该代码可以很好地用于上传用例：
SomeApp.svelte
<script>
...
import Upload from "./upload/Upload.svelte";
export let uid; // firebase uid from a
浏览 2提问于2019-09-29得票数 12
我有一个可重用的组件Tags.svelte，我希望可以选择传递一个单击处理程序：
<Tags {tags} {clickHandler} />
我可以使参数是可选的，但我不知道如何将它附加到组件中的标记<button>项(如果它是可选的)
通常我会这样做：
<button on:click|preventDefault={clickHandler}>{tag}</button>
但我该怎么做呢？
浏览 3提问于2022-05-28得票数 1
我如何在Svelte的HTML中创建变量，就像inside一样，或者根本不应该使用Svelte。我知道下面的例子很简单，但我想到的情况是，对于subArray，我确实需要一些很重的逻辑(不能使用一个一行程序)。
反应
<ul>
{myArray.map((item) => {
const subArray = item.items.filter(i = i > 0) // <- how can I have an intermediate variable like this in Svelte?
return <li>{subAr
浏览 2提问于2022-02-26得票数 2
回答已采纳
我正在构建一个应用程序，用户可以添加和删除不同“类型”的项目。例如，可能有用户可以编辑文本的文本类型，以及用户可以插入图像的图像类型。
向列表中添加项将导致列表与新项一起更新和显示所有旧项。类似地，删除一个项将移除该项，并导致列表只显示其余的项。
add功能运行得非常好。当项目的类型不同时，就会出现删除的问题。以下是我的(简化)代码：
// List.svelte
<script>
import {writable} from "svelte/store";
import Wrapper from "./Wrapper.svelte"
浏览 1提问于2019-11-28得票数 0
回答已采纳
1回答
我在玩Svelte和sb svelte项目。我正在使用JSON中的API中的一些示例数据，到目前为止我已经开始工作了，但我的问题是如何从JSON数据中获得关键项，以便在HTML中自动解析为表标题？
到目前为止，这就是我所拥有的：
JSON
[
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address&#
浏览 4提问于2022-05-25得票数 0
回答已采纳
是否可以像angular (ng-repeat="items in item | limitTo:4")那样在Svelte或limit中中断迭代？例如： {#each items as item, i}
...
{#if i > 4}
{:break} <--- break here
{/if}
...
{/each}
浏览 23提问于2019-05-31得票数 3
回答已采纳
1回答
我尝试在svelte中使用异步#each循环，发现它无论如何都是同步运行的，使用异步等待函数，如下所示：
{#each items as item (item.id)}
{#await render(item) then source}
<Canvas {source} />
{:catch}
<p>error</p>
{/await}
{/each}
并发现无法在svelte中使用异步组件，因为on装入不能像这样异步地使用：
{#each items as item (item.id)}
&l
浏览 5提问于2021-12-23得票数 3
回答已采纳
我试着在Svelte显示一个联系人列表。我需要在异步函数中这样做，因为我需要数据库中的额外数据。它给出了错误
{#each}只对类似数组的对象进行迭代。
如果我删除异步，它可以工作，但当然，我不能访问额外的数据。
App.svelte
{#each contacts_list as contact}
<div>{contact}</div>
{/each}
<script>
import { contacts, user_contacts } from './data-store'
$: contacts_
浏览 3提问于2022-07-06得票数 1
我使用cordova-sqlite-porter将SQLite表导出为JSON，然后使用svelte导出的JSON。 我导出json的代码是： let myDB = '';
let vetdrugs = [];
myDB = window.sqlitePlugin.openDatabase({ name: "vetcalculators.db", iosDatabaseLocation: "Documents" });
var successFn = function(json, count){
vetdrugs = JSON.s
浏览 24提问于2021-08-05得票数 1
2回答
我目前正在使用Svelte构建一个自定义web组件库。
我已经完成了一个选择选项下拉组件，它可以接受嵌套的、有时隙的内容来包含下拉选项。它对鼠标用户没有任何已知的问题，实现如下：
<custom-select label="My Custom Select Element">
<custom-option value="1">Option 1</custom-option>
<custom-option value="2">Option 2</custom-op
浏览 3提问于2020-01-22得票数 2
如果相同的组件在相同的上下文中被多次使用，绑定的属性是否可以在它们的实例之间共享？ 例如，如果我有一个创建复选框的组件，如何组合字母选择器和数字选择器的选择(bind:group)？ 在此示例中，如果选择了多个字母，则选择内容将被正确传播和绑定。但是，如果随后选择了数字，则字母选择将替换为所选数字，而不是将所选数字连接到所选字母。 // App.svelte
<script>
import Selector from './Selector.svelte';
let selection = [];
$: console.log(sele
浏览 14提问于2020-04-02得票数 3
回答已采纳
我有一个使用<svelte:component this={type}>组件在循环中呈现的非同构对象数组，我希望在div中对相同类型的相邻对象进行分组。
例如，我有一些类似于以下代码的代码：
<script>
let things = [
{type: A, content: "One"},
{type: B, content: "Two"},
{type: B, content: "Three"},
{type: A, content: "Four"}
];
</script>
浏览 5提问于2020-05-24得票数 2
回答已采纳
2回答
我试图用下面的代码一个接一个地移动列表元素：
<li class="list-element" in:slide|local={{duration:1000}}>
但不知何故，它似乎并没有转换列表元素。当我删除“本地”时，它会起作用，但不是一个接一个。我做错了什么？我怎样才能解决这个问题？
编辑:示例您可以将其粘贴到svelte中，它将显示问题。
<script>
import {slide} from "svelte/transition"
let data = [...Array(25).keys()];
let wi
浏览 17提问于2022-06-20得票数 1
回答已采纳
3回答
我正在为每个if做一个块。这看起来很简单，但是Svelte认为这是语法错误：
[!] (svelte plugin) ParseError: Unexpected character '#'
public\js\templates\works.html
3: <div class="slides js_slides">
4: {#each works as work, index}
5: <div class="js_slide {#if index === currentIndex }selecte
浏览 0提问于2018-07-18得票数 10
回答已采纳
我正在尝试编写一个应用程序，其中每3个书签，Svelte关闭行并开始一个新的，允许行继续。我使用瘦带组件，这些是“行”、"Col“和"Card*”标记。
<Row>
{#each bookmarks as bookmark, i}
<Col>
<Card class="mb-3">
<CardHeader>{bookmark.title}</CardHeader>
<CardBody>
&
浏览 2提问于2022-04-07得票数 2
回答已采纳
摘要
上下文
实际行为(问题)
预期行为
最小、可测试、可执行的示例
- Data
- Sources
备注
线索
上下文
我试图在一个Svelt中使用http://localhost:1337/restaurants从URL获取一个JSON对象的列表。这个调用在初始化Svelte组件时被检查为要执行，类似于Svelte教程：。
实际行为(问题)
当我打开包含Svelte组件的网页时，我看不到Chromium工具网络面板中的网络调用。
我可以在网页中看到这个错误(显然要感谢我的{:catch})：
TypeError:
浏览 20提问于2021-10-02得票数 9
2回答
我希望在Svelte 3中找到一种方法来遍历#each块一段时间。在Vue中，我会这样做： <li v-for="i in 3"><!-- somecontent --></li> 但据我所知，Svelte使用被缓存的数组的.length属性处理循环的方式有很大的不同。在Svelte中有什么方法可以实现这样的事情吗？ {#each 3 as i}
<li><!-- somecontent --></li>
{/if}
浏览 27提问于2019-10-03得票数 27
回答已采纳
2回答
互联网上有大量的文档可以用jest测试svelte组件，调用呈现函数和模拟浏览器事件。这很好，但是我如何测试svelte组件中的函数呢？
mycompoment.svelte
<script>
function veryComplicated(foo) {
...
}
</script>
<div>...</div>
mycomponent.test.js
import { veryComplicated } from "./mycomponent.svelte"
test('it works', a
浏览 2提问于2021-08-11得票数 1
回答已采纳
我正在尝试绑定{#each}块中的元素并通过单击来删除它们。
<script>
const foodList = [
{ icon: '', elem: null, },
{ icon: '', elem: null, },
{ icon: '', elem: null, },
];
const remove = (index) => {
foodList.splice(index, 1);
浏览 0提问于2021-11-05得票数 1
回答已采纳
在Svelte中，我有一个组件，用于在两个不同的列表中显示项目。当这些项目从一个列表移动到另一个列表时，它们使用一个转换来显示输入或输出。
但是，我也有一种方法来过滤屏幕上显示的内容。显示一组新的项将使用相同的组件，但使用不同的数据。在这种情况下，我不希望出现过渡动画。我假设添加local修饰符会起作用，但似乎Svelte并没有将父元素删除到列表中，而是重用它并在现有的list DOM元素中添加新数据。
我试图复制我在下面的示例代码中看到的内容。
通缉行为：
单击TODO会将TODO从一个列表切换到另一个列表。
单击“切换类别”将切换列出的TODOs，而不动画添加或删除的TODOs的&
浏览 2提问于2019-10-01得票数 4
1回答
我是Svelte的新手，我被困在了一个对用户输入没有反应的列表中。
我的情况很简单：
父组件(App.svelte)显示对象列表
子组件提供用于更改列表值的输入元素。
问题:当我更改输入元素中的值时，App.svelte中的列表不会更新。
代码：
App.svelte
<script>
import Nested from './Nested.svelte';
let customers=[{
id:1,
name: "Smith"
},{
id:2,
浏览 2提问于2021-02-13得票数 0
1回答
从角2应用程序连接到
、、、、
我目前正在重构一个web应用程序，从角1到角2，但我很难找到从一个角2应用程序连接到Google的例子。
我使用创建了Range2应用程序。我想使用来自几个不同服务的端点api，所以如果任何建议的答案都考虑到了这一点，那就更好了。
角1中的我做了下面的
在我的index.html：
<script>
function init() {
console.log("Initializing Cloud Endpoints..");
window.init();
};
<
浏览 2提问于2016-11-10得票数 2
1回答
我创建了一个自定义dropdown组件。我在同一个页面上有多个它的实例，如下所示：
label : <Select>
label : <Select>
label : <Select>
每当我单击该组件时，第一个组件都只能打开。我该如何解决这个问题呢？谢谢。
// Select.svelte
<div class="dropdown">
<slot></slot>
</div>
SelectItem.svelte
<Select>
content
</Select>
i
浏览 2提问于2021-03-29得票数 1
我正在尝试理解如何才能使Emmet在.svelte文件上正常工作。
当我使用PHP文件或HTML文件时，就不会遇到这个问题。
当我使用一个简单的缩写，比如div时，两种语言(<div>|</div>)的enter键之后的输出是相同的，光标在块的中间。
使用HTML文件可以正常工作；因此在按enter键之后，块将被格式化(|表示光标)：
<div>
|
</div>
在使用.svelte时，这不起作用：
<div>
|</div>
我如何告诉Emmet缩进代码，即使是在.svelte扩展中？我试过在settings.
浏览 3提问于2020-05-21得票数 2
1回答
我正在为svelte构建拖放组件，并想添加动画。我已经改编了另一个组件的代码，但我不能让它工作，你能帮我找出问题所在吗？我不明白我得到的错误。下面是工作REPL https://svelte.dev/repl/acc2c90db2054d89b210f23c026c525e?version=3.16.7 粘贴时显示错误： in:receive={{ key: index }}
out:send={{ key: index }}
animate:flip={{ duration: 300 }} 到REPL中component的第130行 下面的错误消息：“使用animate指令的元素必须是键控
浏览 9提问于2019-12-27得票数 3
回答已采纳
1回答
对于在Svelte循环中将道具传递给组件，我非常困惑。我期望下面的代码片段的行为是，存储变量文件中的更改将触发对div类和{file}: {is_open}完美地工作的内容的重新呈现。但是，子组件图标不接收is_open变量的更新。这导致了一种奇怪的情况，在这个组件中，{file}: {is_open}呈现为filename: true，而子组件图标将显示filename: false。
{#each Object.entries($files) as [file, is_open], i}
<div class:open={is_open} class:closed={!is_open
浏览 5提问于2022-02-10得票数 0
1回答
对于Svelte组件的使用和数据一致性，我有一个小小的问题。
我有一个公司列表，这些公司都是用数组中的名称初始化的。我在添加一些特定于组件的变量，因为我想在保存之前保留一些中间状态。
main (app.svelte)组件包含公司数组和列表排序按钮。
当我尝试对列表进行排序时，列表会很好地排序，但是组件特定的变量不会跟随。
我在上创建了一个小示例，正如您所看到的，在更改排序顺序时，年龄与名称没有排序。
我想把所有的信息都存储在商店里，但这感觉就像一个笨拙的解决方案，违背了将应用程序分解成组件的目的(如果我想的话，我可以在app.svelte中使用一个大数组)。
我怎么才能解决我的问题？-还是我
浏览 27提问于2022-11-11得票数 0
回答已采纳
我试图用svelte反应性语句制作一个简单的d3力有向图，但很明显，它不是一起工作的。
第一个示例，这是我制作图()的最简单的方法：
<script>
import * as d3 from 'd3'
import { onMount } from 'svelte'
import data from './data.json'
let svg,
width = 500,
height = 400,
links, nodes
浏览 6提问于2022-12-03得票数 1
回答已采纳
1回答
我有嵌套的JSON数组
let car = [
{
name: "BMW",
detail: [
{name: headlight, type: flame},
{name: taillight, type: spark},
],
},
{
name: "Merced Benz",
detail: [
{name: headlight, type: spark},
{name: taillight, type: flame},
],
},]
我叫{#e
浏览 0提问于2019-06-10得票数 3
回答已采纳
1回答
我正在使用这个代码上传一个文件。我想显示文件的内容，但我得到的只是对象文件，而不是其他任何东西。是否有一种方式来显示文件内容的苗条？
文件text2.txt：
1 2 3 4 5 6
7 8 9 10 11 1
Test.svelte：
<script>
import { onMount } from "svelte"
// d3.csv(' http://127.0.0.1:8081/test.csv').then(function(data) {
// console.log(data[0])})
浏览 0提问于2020-12-03得票数 4
回答已采纳
2回答
我曾尝试使用sveltekit 1.0.0-next.137的SWRP6.8.0。我已经安装了npm i swiper刷卡。在本页的末尾有一个详细的描述如何使用swiper：。
这是代码：
<script>
import SwiperCore, { Navigation, Pagination } from 'swiper';
/* Import Swiper and SwiperSlide components from .svelte files */
import Swiper from 'swiper/esm/svelte/swiper.
浏览 0提问于2021-07-28得票数 4
回答已采纳
我正在尝试逐步浏览使用find_each检索的记录列表。
我根据这个中的答案设计了我的控制器代码，但是我仍然得到一个“没有给出块(让步)”的错误。
我刚刚开始学习Ruby和Rails，我还没有找到一个完整的块和yet的解释(尽管有很多基本的例子)来满足我的需求。
我的代码如下所示：
def select_save
@class = params[:class]
@student_id = params[:id]
@class.each do |id|
old_subject = Subject.find(id)
new_subject = old
浏览 0提问于2012-08-15得票数 5
回答已采纳
我习惯于使用特快和模板引擎，像把手。我想开始使用Svelte和SvelteKit，但我不知道如何开始这两者的工作。我被困在从服务器向前端传递数据的过程中。在Express中，我通常会连接到数据库，然后将数据传递给res.render，然后模板引擎将在那里接管。到目前为止，我认为我必须运行一个handle函数来传递数据，然后我可以从我的页面访问它。但是似乎句柄函数运行于每个请求，如果我的所有页面都需要不同的数据，这是否意味着我必须对每个页面使用一个巨大的开关语句或什么东西？
有人能告诉我，这是否是传递数据的正确方式，还是有更好的方法。抱歉，我对元生和Svelte很陌生。
浏览 8提问于2022-06-27得票数 1
回答已采纳
我正在为学习的目的而在Svelte开发一个小的Todo应用程序(我是Svelte的新手)。
在App.svelte中，我导入TodoItem组件循环一个todos数组：
import TodoItem from './TodoItem.svelte';
//more code
{#each todos as t, index}<TodoItem />{/each}
在TodoItem.svelte中，我有：
<script>
import { createEventDispatcher } from 'svelte';
浏览 5提问于2020-10-02得票数 0
回答已采纳
问题
我试图利用Svelte中的{#await}，但似乎找不到一种方法使其结果反应性({:then result})。
示例
如果您想自己尝试一下，可以找到这个示例。
在这个应用程序中：
您可以通过todos从服务器通过{#await}加载一些
使用{#each}块迭代它们，单击它们时切换它们的done属性。
如何更新todos
App.svelte
<script>
import Todo from "./Todo.svelte";
const todos = [{
title: 'Todo 1
浏览 1提问于2021-01-08得票数 1
回答已采纳
1回答
当我将一个对象传递给Svelte组件时，我希望它能够被解构。像这样的东西？
var o = { item: "bread", count: 12 }
<Component ...object>
在组件内
<b>{{item}}:</b> {{count}}
目前看来，我必须像这样手动完成
<Thing item={{thing.item}} count={{thing.count}} />
浏览 2提问于2017-08-15得票数 1
示例和观察到的行为如下：
我有一个对象数组，每个对象都保存着传递给#each循环中新组件的数据。似乎是相当标准的东西。
每个组件都有一个与其状态变量"isDescVisible“相关联的按钮，它表示”显示/隐藏更多详细信息“。到现在为止还好。我们点击“第一个”组件中的“显示详细信息”，得到第一个组件的详细信息。
但是，我们在数据数组中再添加一个对象。不过，发生的事情还是很平常的。新组件就会呈现出来。但是不知怎么的，所有组件(旧的和新的)的状态(显示细节与否)都搞砸了。新组件继承旧的“顶层”状态，依此类推。
问:为什么？第二个问题:如何避免？
我可以想象，在突变数组之后，所有的组件都会被
浏览 1提问于2022-04-15得票数 0
Svelte中的过渡仅适用于进入或退出DOM的元素。
例如，这将在最初将div添加到DOM时应用淡入淡出：
<div in:fade>{message}</div>
当message发生变化时，我们如何添加一个过渡呢？
由于Svelte不能在单个元素上拥有键，我找到的唯一解决方案是使用单个元素数组在DOM中触发一个新元素，这看起来并不理想：
<script>
let messages = ['hello world'];
function updateMessages (message) {
messages = [message]
浏览 12提问于2020-05-16得票数 2
回答已采纳
我正在为一个项目使用Strapi v4和Svelte (我在开发方面也是很新的，对不起，但我的问题可能是基本的)。我从本地主机中获取Strapi数据，并将它们放入控制台日志中，没有问题。使用GraphQL，我得到的数据如下所示，例如：
"produits": {
"data": [
{
"id": "1",
"attributes": {
"reference": "MEV620001"
}
}
我的问题是，当用
浏览 5提问于2022-01-01得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
